0
votes

Store d'état ne se met pas à jour correctement à Redux

Je suis nouveau sur Redux et j'essaie d'utiliser Redux dans mon application React.

Voici mes réducteurs.

Le réducteur roor -

const mapStateToProps=(state)=>{  
  console.log(state);
return state;
}

export default connect(mapStateToProps,{dataLoaded})(Main)

et réducteur de dataList-

 componentDidMount()
{
  FetchService(this.state.url)
    .then((res)=> res.json())
    .then(  (result)=>this.updateState(result)                                   
         ).catch(function(error){console.log(error)});
}


updateState(result)
{
  this.props.dataLoaded(result);  
}

Voici la classe de créateur d'action -

export const dataLoaded=(data)=>{
    return {
        type:'full_data',
         payload:{gridData:data}
    }
}

Maintenant du composant ci-dessous, je suis faire un appel Fetch au réseau et lorsque l'appel revient, je veux mettre à jour l'état de l'application avec les dernières données -

const INITITAL_STATE={gridData:[]}

const dataListReducer=(state=INITITAL_STATE,action)=>{    
switch(action.type){
    default: return {...state}
}
return state;
}

export default dataListReducer;

Le composant effectue un appel pour se connecter comme prescrit -

import {combineReducers} from 'redux';
import dataListReducer from './dataList';

export default combineReducers({
    dataListReducer
})

Pourquoi console.log n'imprime-t-il pas les dernières données?

Que me manque-t-il ici?

Veuillez laisser je sais si je peux clarifier davantage.

reactjs react-redux redux

0 commentaires

3 Réponses :

1
votes

Cher ami, vous n'avez rien défini dans votre réducteur pour traiter les actions qui lui sont envoyées.

Pour ce faire, vous devez configurer certains cas dans votre réducteur comme ceci:

const dataListReducer=(state=INITITAL_STATE,action)=>{    
    switch(action.type){
       case "full_data":
          return {...state, myData}
       default: 
          return state
}

2 commentaires

J'ai un défaut dans le commutateur qui copie l'état dans un nouvel objet et le renvoie. Cela aurait dû fonctionner correctement?

Cela fonctionne, mais il définit le même état que précédemment - pas de mise à jour. Vous devez à la place définir la date de la charge utile dans l'état, afin que vous puissiez voir la mise à jour réelle de l'interface utilisateur.

1
votes

Ce que vous avez fait dans votre réducteur est de renvoyer le même état qu'il a déjà. C'est donc un réducteur de vide - comme ne rien faire. Ce que vous devez faire est au retour du réducteur, de prendre en compte ce qui est passé dans la charge utile de l'action.

case "full_data": return {... état, action.payload}

ou je suggérerais même de spécifier explicitement la propriété, de sorte que d'autres extensions soient possibles et ne remplaceront aucun frère

case "full_data": return {... état, ... gridData: action.payload.gridData}

2 commentaires

logique. Mais pourquoi cette ligne affiche une erreur (Erreur d'analyse: jeton inattendu, attendu ",") return {... state, action.payload}

Dans l'exemple, j'utilise l'opérateur spread , qui est une fonctionnalité d'ES6. Vous pouvez utiliser Object.assign à la place si vous utilisez une ancienne version de JS.

1
votes

Cela devrait fonctionner pour vous.

const INITITAL_STATE={gridData:[]}

const dataListReducer=(state=INITITAL_STATE,action)=>{    
  switch(action.type){
      case: 'full_data':
        return { ...state, gridData: action.payload.gridData }
      default: return {...state}
  }
}

export default dataListReducer;

0 commentaires