web-dev-qa-db-ja.com

redux-sagaでパラメーターを渡す方法

react-nativeとredux-sagaの練習として、ちょっとしたWeather-Applicationを開発しようとしています。

データのフェッチと表示は問題なく動作しますが、パラメーターをTextInputから最後のAPI呼び出しに渡すのに苦労しています。

今の目標は、cityName文字列をapi.js内のfetchWeather関数に渡し、それをconsole.logに渡すことです。

Main.js内のprops.requestWeather(cityName)で始まる

Actionとsagaを介してapiCallにcityNameを渡すためにさまざまなことを試みましたが、私は他の何よりも推測していることに気づきました。悲しいことに、以下の研究も同様に成功しなかったので、私たちはここにいます。

文字列をパラメータとして渡す方法や、次の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)
  }
}
react-nativereduxredux-saga
3
dave

まず、cityNameを受け入れるようにアクションを変更する必要があります。

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

次に、サーガの内部：

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

...そして最後に内部リクエスト：

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