Redux - révision de la logique et des actions du réducteur

Un de ces jours, je bricolais beaucoup de fichiers redux'a, où, logiquement, les fichiers sont déplacés vers des réducteurs, des actions, des constantes de type d'actions. Tout cela s'est avéré être une tâche assez difficile, garder tous ces types de fichiers dans votre tête et retracer la logique. Et ... eureka, l'idée est venue de simplifier l'écriture de la logique redux. Peut-être en créant votre vélo, mais qui n'a pas essayé d'écrire ses vélos? Mais l'essentiel n'est pas d'écrire, mais d'écrire du support quand . Permettez-moi d'essayer de vous montrer un peu ma vision de ma logique de redux.

Commencer

Et nous avons donc réduit:

//   import { TODO } from './actions/const'; ..... //      .... //    reducer function todoApp(state = initialState, action) { switch (action.type) { case TODO.SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) case TODO.ADD_TODO: return Object.assign({}, state, { todos: [ ...state.todos, { text: action.text, completed: false } ] }) case TODO.TOGGLE_TODO: return Object.assign({}, state, { todos: state.todos.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: !todo.completed }) } return todo }) }) ...          ...            ... default: return state } } 

prise des quais sur redux .

l'action ressemble à:

 //   import { TODO } from './const'; export const addTodo = (value) => ({ type: TODO.ADD_TODO, payload: value }) 

constantes je pense qu'il n'y a pas besoin de montrer.

BOOL

J'essaierai de décrire la frénésie que j'éprouve lors de la lecture du code, en particulier lors du débogage ou de l'extension des fonctionnalités.

• recherche - tout le temps nécessaire pour appuyer sur Ctrl + F et globalement Ctrl + Shift + F
• pas visible immédiatement d'où les jambes se développent. Il découle du paragraphe ci-dessus.
• non, c'est juste un peu, donc j'ai toujours le projet entier percé de constantes. Non, je ne suis pas contre les constantes, mais pourquoi? De plus, s'ils sont utilisés avec l'imbrication comme dans l'exemple, et s'ils sont concaténés à partir de plusieurs, c'est généralement un enfer de navigation.
• la logique est floue. Dans un lieu d'action dans un autre, le traitement de ces actions dans la troisième constante (facultative) n'est nécessaire que pour ces deux-là.
• J'ai besoin de garder un grand nombre de fichiers ouverts lors du développement ou du débogage. Il découle du paragraphe ci-dessus.
  Eh bien, etc.

Entrée logique

Cela peut sembler étrange et choquant au premier abord, mais il me semble tout de même que c'est l'endroit où il faut être. Je vais essayer de transmettre mon modèle.

réducteur

espionné sur google

Gear - un mécanisme qui modifie le couple et la puissance. Il s'agit d'un ou plusieurs engrenages interagissant les uns avec les autres et réduisant le nombre de tours du moteur à une vitesse de rotation acceptable du nœud d'exécution.

C'est-à-dire que l'arbre sur celui-ci a un engrenage, cet engrenage transmet la rotation à un autre engrenage, qui à son tour tourne vers son arbre. Nous retirons l'arbre et l'engrenage est retiré avec lui. Pas un module discontinu, pour ainsi dire.

Si vous poursuivez l'allégorie, l'arbre est l'action et l'engrenage est la logique. Il en résulte que la boîte de vitesses agit comme un tel lien pour assurer la transmission du couple, c'est-à-dire des données dans l'application. Il devrait soutenir l'environnement de travail idéal des mécanismes.

action

Comme mentionné ci-dessus, il s'agit de l'action elle-même et de la logique de l'énergie à transmettre (dans notre cas, les données).

Et c'est parti. Mon vélo

réducteur:

 export function todoApp(state = initialState, action) { if (typeof action.func === 'function') { return action.func(state); } } 

oui c'est tout mon réducteur. En ce moment, il y aura peut-être une petite lacune dans les schémas, comment? nous avons pris la logique de reducer'a ..? Oui Je vous le dis, nous avons sorti la logique de reducer'a !!!

Jetons un coup d'œil à l'action:

 export function addTodo = (value) => ({ type: 'ADD_TODO' , payload: value, func: (state) =>({...state, value}) }) } 

C'est pour cette raison que nous avons fait ressortir la logique responsable du transfert des données vers le magasin. Le réducteur est resté pour assurer le fonctionnement de l'ensemble du mécanisme. Et il doit bien le faire sans être distrait par des choses qui ne le concernent pas. Et nous ne pouvons observer que l'ordre de croissance des jambes et si nécessaire, puis trouver et réparer ou compléter rapidement.

Cela vaut la peine de le noter. Nous avons supprimé les constantes. Oui et changez aussi. Ce qui a permis de réduire la complexité de l'exécution d'O (1) dans reducer'e.

Ceci est juste un exemple d'esquisse que vous pouvez développer et supprimer combineReducers. Se développer, se compléter, s'adapter à vos besoins est si formidable, prendre un outil et le rendre idéal pour vos tâches.

Et surtout, je veux dire.

Soyez intelligent. abeille