如何使用 redux-saga 传递参数

Question

作为 react-native 和 redux-saga 的练习，我正在尝试开发一个小天气应用程序。

虽然获取和显示数据工作正常，但我不知何故难以将参数从 TextInput 传递到最终的 API 调用。

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

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

我尝试了各种方法，通过 action 和 saga 将 cityName 传递给 apiCall，只是让我意识到，我更多的是猜测而不是其他任何事情。遗憾的是，以下研究也没有成功，所以我们到了。

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

戴夫

Main.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);

action.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);
  }
};

Answer 1

首先你需要修改你的动作来接受cityName:

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

然后是内部传奇：

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

...最后是内部请求：

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

Answer 2

如果您在 React 应用程序中将 Axios 与 Redux-Saga 结合使用，此信息和示例代码应该很有用

在 Redux saga 中，如果你想发送 AJAX 请求最好使用 call 方法（built-in saga）而不是像 [=12= 这样的常规使用 Axios 方法]

REDUX-SAGA call method

1- 第一个参数：传递您的 AJAX 库处理程序，例如 call(Axios)，在第二个参数中，您必须为您的请求传递 options[]



const baseApiUri = process.env.BASE_API || 'http://localhost:3030/v1';
const jwtToken = localStorage.getItem('INTERVIEW-TOKEN');

const API = axios.create({
  baseURL: baseApiUri,
  timeout: 5000,
  headers: {
    authorization: jwtToken,
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
});


// your reqest options
const options = {
      method: 'post',
      url: ''localhost/3030,
      data: { name: 'hamid' },
}


// send request with SAGA
const user = yield call(API, options);



// send a request with Axios

const user = await API(options);

// or

const user = await axios.post(options)

如何使用 redux-saga 传递参数

How to pass parameters with redux-saga

react-native

redux

redux-saga