web-dev-qa-db-fra.com

Comment passer des paramètres avec Redux-Saga

en tant qu'exercice pour React-Native & Redux-Saga, j'essaie de développer une petite application météorologique.

Lors de la récupération et de la présentation des données fonctionne simplement bien, je lutresse d'une manière d'une certaine lutte pour passer un paramètre à partir d'un textinput à l'appel final de l'API.

Le but est de passer juste pour passer la chaîne de nom de la ville à la fonction FetchWeather à l'intérieur de l'API.J et de la console.Log.

Commençant par props.requestWeather(cityName) Inside Main.js

J'ai essayé diverses choses pour passer le nom de ville via Action et Saga à l'Apicall, que je me rendais compte que je devinais plus que autre chose. Malheureusement, les recherches suivantes n'ont pas été couronnées de succès et nous sommes donc ici.

Toutes les idées sur la manière de transmettre la chaîne en tant que paramètre et/ou critique générale à propos de la configuration Redux suivante seraient très appréciées!

Dave

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
10
dave

Tout d'abord, vous devez modifier votre action pour accepter cityName:

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

Puis à l'intérieur de Sagas:

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

... et enfin à l'intérieur de la demande:

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