web-dev-qa-db-fra.com

comment définir l'état initial dans redux

J'essaie de comprendre comment définir un état initial pour un magasin dans Redux. J'utilise https://github.com/reactjs/redux/blob/master/examples/todos-with-undo/reducers/index.js à titre d'exemple. J'ai essayé de modifier le code de sorte que le todos ait une valeur initialisée.

const todoApp = combineReducers({
  todos,
  visibilityFilter
}, {
  todos: [{id:123, text:'hello', completed: false}]
})

suivant la doc: http://redux.js.org/docs/api/createStore.html

mais ça ne marche pas et je ne sais pas trop pourquoi.

reactjsreduxreact-redux
38
Saad

Il doit s'agir du deuxième argument de createStore:

const rootReducer = combineReducers({
  todos: todos,
  visibilityFilter: visibilityFilter
});

const initialState = { 
  todos: [{id:123, text:'hello', completed: false}] 
};

const store = createStore(
  rootReducer, 
  initialState
);
61
ctrlplusb

Vous pouvez définir l'état initial dans le ou les réducteurs.

const initialTodos = [{id:123, text:'hello', completed: false}]

// this is the ES2015 syntax for setting a default value for state in the function parameters
function todoReducer(state = initialTodos, action) {
  switch(action.type) {
    ... 
  }
  return state
}


const todoApp = combineReducers({
  // todos now defaults to the array of todos that you wanted and will be updated when you pass a new set of todos to the todoReducer
  todos: todoReducer,
  visibilityFilter
})
27
jmancherje

selon la réponse @ctrlplusb, cela fonctionne parce que

const rootReducer = combineReducers({
  todos: todos,
  visibilityFilter: visibilityFilter
});

le premier todos est une clé qui définit le second todos comme valeur de retour du réducteur. Les réducteurs fonctionnent toujours une fois après la création du magasin. Cela initialise votre magasin global.

Une action est envoyée lors de la création du magasin. C'est ainsi que l'état initial fourni dans chaque réducteur combiné est initialisé dans le magasin. Si vous vérifiez les outils de développement de redux, vous verrez que la première action envoyée est "@@ redux/INIT {quelque chose}"

Dans la documentation de redux, vers la fin du fichier, il y a une répartition ({type: ActionTypes.INIT})

Voir ici https://github.com/reduxjs/redux/blob/master/src/createStore.js#L281-L284

Voir cette question/réponse que j'ai faite sur stackoverflow clarifiant la réponse: Différentes façons d'initialiser l'état global initial d'un magasin de redux réactif?

0
Vincent Tang