Redux - relation des réducteurs aux actions

Question

Je suis nouveau à réagir/redux. J'essaie de comprendre comment toutes les pièces de Redux interagissent. La seule chose qui me trouble est de comprendre la relation entre les actions et les réducteurs. Lorsqu'une action est appelée, comment le magasin sait-il quel réducteur utiliser? Le base-t-il complètement sur le nom du type d'action? Les noms de types doivent-ils être uniques? À qui ou à quoi le réducteur transmet-il le nouvel objet d'état, le magasin ou l'action?

Si je comprends bien, il va comme ceci:

1. store.dispatch (action) est appelée
2. magasin trouve le réducteur lié basé sur une action de type
3. clones Réducteur l'objet d'état actuel, fait les changements, les repasse (quelque part)

Answer 1

1: comment le magasin sait-il quel réducteur utiliser -> Ceci est entièrement basé sur le type d'action.

2: Les noms de types doivent-ils être uniques? -> Ce n'est pas une règle. Mais surtout, oui. Chaque action a un nom de type distinct et le réducteur correspondant est appelé. 3: À qui ou à quoi le réducteur transmet-il le nouvel objet état, le magasin ou l'action? -> Le réducteur ne transmet le nouvel objet d'état nulle part. Fondamentalement, il déclenche un événement de changement d'état pour tous vos composants de réaction qui l'écoutent. Tous les composants écoutant l'état modifié sont rendus avec la nouvelle version de l'état, ce qui permet de mettre à jour votre DOM.

Answer 2

Généralement, vous avez seulement un réducteur responsable de l'état complet.

Ce réducteur peut être divisé en différentes fonctions réductrices plus petites, chacune étant responsable d'une tranche différente de l'état. Par exemple Redux's combineReducers() utility pourrait le faire, mais vous pouvez également le faire à la main.

Si vous utilisez combineReducers(), , chacune des fonctions du réducteur est exécutée pour chaque action envoyée. Ils décident alors uniquement en fonction du type d'action si l'action doit affecter sa tranche d'état. Si tel est le cas, une copie mise à jour de cette tranche est renvoyée. Si sa tranche n'est pas affectée par l'action, elle est renvoyée inchangée.

Answer 3

Dans une configuration Redux typique, les actions sont envoyées à TOUS les réducteurs et c'est aux réducteurs de décider s'ils se soucient de cette action. Un modèle commun est un commutateur dans le réducteur qui vérifie action.type, a des cas pour les actions qu'il se soucie et un cas par défaut qui retourne juste l'état actuel comme celui-ci:

export default (state = false, action) => { 
    switch (action.type) { 
    case START_LOADING: 
     return true; 
    case STOP_LOADING: 
     return false; 
    default: 
     return state; 
    } 
} 

Dans ce cas, je dis mon réducteur il se soucie seulement des actions avec le type START_LOADING ou STOP_LOADING et que dans tous les autres cas il devrait juste retourner son état précédent. Pour une bonne compréhension de Redux (et Flux), je vous suggère de consulter Code Cartoons par Lin Clark ou video qui couvre la plupart des mêmes choses.