Lire Magasin de l'État Initial dans Redux Réducteur
État Initial dans un Redux application peut être définie de deux façons:
- passe comme deuxième argument de
createStore
(docs lien) - passe comme premier argument à votre (sous-)réducteurs (docs lien)
Si vous passez de l'état initial de votre magasin, comment avez-vous lu que l'état de la stocker et la faire le premier argument dans votre réducteurs?
Vous devez vous connecter pour publier un commentaire.
Première considérons un cas où vous avez un seul réducteur.
Dites que vous ne l'utilisez pas
combineReducers()
.Alors votre réducteur pourrait ressembler à ceci:
Maintenant supposons que vous créez un magasin avec elle.
L'état initial est égal à zéro. Pourquoi? Parce que le deuxième argument de
createStore
étaitundefined
. C'est lestate
passé à votre réducteur de la première fois. Lorsque Redux initialise il distribue un “dummy” action pour remplir l'état. Si votrecounter
réducteur a été appelé avecstate
égal àundefined
. C'est exactement le cas qui “active” l'argument par défaut. Par conséquent,state
est maintenant0
que par le défautstate
valeur (state = 0
). Cet état (0
) sera retourné.Considérons un scénario différent:
Pourquoi est-il
42
, et pas0
, cette fois? Parce quecreateStore
a été appelé avec42
comme deuxième argument. Cet argument devient lestate
passé à votre réducteur avec le mannequin d'action. Ce temps,state
n'est pas non défini (c'est42
!), donc, ES6 par défaut de l'argument de la syntaxe n'a pas d'effet. Lestate
est42
, et42
est retourné à partir du réducteur.Maintenant considérons le cas où vous utilisez
combineReducers()
.Vous avez deux réducteurs:
Le réducteur généré par
combineReducers({ a, b })
ressemble à ceci:Si nous appelons
createStore
sansinitialState
, il va initialiser lastate
à{}
. Par conséquent,state.a
etstate.b
seraundefined
par le temps qu'il appellea
etb
réducteurs. Les deuxa
etb
réducteurs recevrezundefined
comme leurstate
arguments, et si ils spécifier des valeurs par défautstate
valeurs, celles-ci seront retournés. De cette façon, le combiné réducteur renvoie une{ a: 'lol', b: 'wat' }
d'état de l'objet sur la première invocation.Considérons un scénario différent:
Maintenant que j'ai précisé le
initialState
comme argument decreateStore()
. L'état renvoyé de la combinaison d'un réducteur de combine l'état initial, j'ai spécifié pour laa
réducteur avec le'wat'
par défaut de l'argument spécifié queb
réducteur choisi lui-même.Rappelons que le combiné réducteur de n':
Dans ce cas,
state
a été spécifié de sorte qu'il ne tombe pas en arrière pour{}
. C'était un objet aveca
champ égal à'horse'
, mais sans leb
champ. C'est pourquoi lea
réducteur reçu'horse'
comme sonstate
et volontiers retourné, mais leb
réducteur reçuundefined
comme sonstate
et revint ainsi son idée de la valeur par défautstate
(dans notre exemple,'wat'
). C'est de cette façon nous obtenons{ a: 'horse', b: 'wat' }
en retour.Pour résumer cela, si vous vous en tenez à Redux conventions et retour à l'état initial de réducteurs lorsqu'ils sont appelés à
undefined
comme lestate
argument (la façon la plus simple à mettre en œuvre c'est pour spécifier lestate
ES6 par défaut de la valeur de l'argument), vous allez avoir une belle comportement utile pour les combinés réducteurs. Ils préfèrent la valeur correspondante dans lainitialState
objet que vous passez à lacreateStore()
fonction, mais si vous ne passez pas tout, ou si le champ correspondant n'est pas définie, la valeur par défautstate
argument spécifié par le réducteur est choisi à la place. Cette approche fonctionne bien, car il fournit à la fois l'initialisation et de l'hydratation de données existantes, mais permet à chaque réducteurs de réinitialiser leur état et si les données n'a pas été conservé. Bien sûr, vous pouvez appliquer ce modèle de manière récursive, que vous pouvez utilisercombineReducers()
sur de nombreux niveaux, ou même composer des réducteurs manuellement par l'appel de réducteurs et de leur donner la partie pertinente de l'état de l'arbre.combineReducers
. Je vous remercie encore beaucoup.function counter(state = 0, action)
oufunction visibleIds(state = [], action)
.En un mot: c'est Redux celui qui passe à l'état initial à l'réducteurs, vous n'avez pas besoin de faire quoi que ce soit.
Lorsque vous appelez
createStore(reducer, [initialState])
vous laisser Redux savoir quel est l'état initial à être transmis à l'réducteur lors de la première action est livré dans.La deuxième option que vous mentionnez, s'applique uniquement dans le cas où vous n'avez pas à passer d'un état initial lors de la création du magasin. c'est à dire
function todoApp(state = initialState, action)
de l'état ne seront initialisées si il n'y avait pas d'état transmis par Redux
menuState
, comment puis-je dire au menu réducteur de lire la valeur destate.menu
de la stocker et l'utiliser comme son état initial?combineReducers() de faire le travail pour vous.
La première manière d'écrire n'est pas vraiment utile :
Mais l'autre, qui est l'équivalent est plus clair :
J'espère que cela répond à votre demande (ce qui j'ai compris que l'initialisation des réducteurs en passant intialState et le retour de l'etat)
C'est comment nous le faisons (avertissement: copié à partir de la Machine a ecrire de code).
L'essentiel, c'est la
if(!state)
test dans le mainReducer(réglage d'usine) la fonction