时间戳

首页 > 解决方案 > 如何使用 redux-saga 传递参数

react-native - 如何使用 redux-saga 传递参数

问题描述

作为 react-native 和 redux-saga 的练习，我正在尝试开发一个小的 Weather-Application。

虽然获取和呈现数据工作得很好，但我不知何故难以将参数从 TextInput 传递到最终的 API 调用。

现在的目标只是将 cityName 字符串传递给 api.js 和 console.log 中的 fetchWeather 函数。

从props.requestWeather(cityName)Main.js 内部开始

我尝试了各种方法来通过 action 和 saga 将 cityName 传递给 apiCall，只是让我意识到，我比其他任何事情都更加猜测。可悲的是，以下研究也没有成功，所以我们在这里。

任何关于如何将字符串作为参数传递的想法和/或对以下 redux 设置的一般批评将不胜感激！

戴夫

主.js

//[...] setCity Name to TextInput component
const [cityName, setCityName] = useState('')   
// [...] calling the action (inside onClickHandler)
props.requestWeather() 
//[...] 
const mapStateToProps = state => ({
    weatherData: state.weatherData
});

const mapDispatchToProps = dispatch =>
    bindActionCreators({ requestWeather }, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Main);

动作.js

export const REQUEST_WEATHER = "REQUEST_WEATHER"
export const RECEIVE_WEATHER = "RECEIVE_WEATHER"

export const requestWeather = () => ({ type: REQUEST_WEATHER })
export const receiveWeather = weatherData => ({ type: RECEIVE_WEATHER, weatherData })

sagas.js

function* getWeather(action) {
  try {
    const weatherData = yield call(fetchWeather);
    yield put(receiveWeather(weatherData));
  } catch (e) {
    console.log(e);
  }
}

    
function* watchAll() {
  yield all([
    //[...]
    takeLatest(REQUEST_WEATHER, getWeather),
  ]);
}
export default watchAll;

api.js

export const fetchWeather = async () => {
  const APPID = process.env.WEATHER_API_KEY;

  try {
    let weatherData = [];
    const weather1Promise = axios(
      "https://api.openweathermap.org/data/2.5/weather?q=Rom&APPID=" + APPID
    );
    //[...]
    const [weather1, weather2, weather3] = await Promise.all([
      weather1Promise,
      weather2Promise,
      weather3Promise,
    ]);
    weatherData.push(weather1.data, weather2.data, weather3.data);
    return weatherData;
  } catch (e) {
    console.error(e);
  }
};

标签： react-nativereduxredux-saga

解决方案

首先，您需要修改您的操作以接受cityName：

export const requestWeather = (cityName) => ({ type: REQUEST_WEATHER, cityName });

然后在 sagas 里面：

const weatherData = yield call(fetchWeather, action.cityName);

...最后是内部请求：

export const fetchWeather = async (cityName) => {
  console.log(cityName); // will log entered city name
};

推荐阅读