Redux: revisión de la lógica y acciones del reductor

Uno de estos días estaba jugando con muchos archivos redux'a, donde, lógicamente, los archivos se mueven a reductores, acciones, constantes de tipo de acciones. Todo esto resultó ser una tarea bastante difícil, mantener todos estos tipos de archivos en la cabeza y rastrear la lógica. Y ... eureka, surgió la idea de simplificar la escritura de la lógica redux. Quizás creando tu bicicleta, pero ¿quién no intentó escribir sus bicicletas? Pero lo principal no es escribir, sino escribir soporte cuando . Déjame intentar mostrarte un poco mi visión de mi lógica redux.

Inicio

Y entonces tenemos reducir:

//   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 } } 

tomado de muelles en redux .

la acción se ve así:

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

constantes Creo que no hay necesidad de mostrar.

BOOL

Trataré de describir el frenesí que experimento al leer el código, especialmente al depurar o expandir la funcionalidad.

• búsqueda: todo el tiempo que necesita presionar Ctrl + F y globalmente Ctrl + Shift + F
• no visible inmediatamente desde donde crecen las piernas. Fluye del párrafo anterior.
• no, esto es solo un poco, así que todavía tengo todo el proyecto atravesado por constantes. No, no estoy en contra de las constantes, pero ¿por qué? Además, si se usan junto con la anidación como en el ejemplo, y si se concatenan de varios, esto generalmente es un infierno de navegación.
• La lógica es borrosa. En un lugar de acción en otro, el procesamiento de estas acciones en la tercera constante (opcional) solo es necesario para esos dos.
• Necesito mantener abiertos muchos archivos al desarrollar o depurar. Fluye del párrafo anterior.
  Bueno, etc.

Entrada lógica

Tal vez parezca extraño e impactante al principio, pero aún así me parece que este es el lugar para estar. Trataré de transmitir mi plantilla.

reductor

espiado en google

Engranaje: un mecanismo que cambia el par y la potencia. Este es uno o más engranajes que interactúan entre sí y reducen el número de revoluciones del motor a una velocidad de rotación aceptable del nodo de ejecución.

Es decir, el eje tiene un engranaje, este engranaje transmite la rotación a otro engranaje, que a su vez gira a su eje. Quitamos el eje y el engranaje se retira con él. No es un módulo discontinuo, por así decirlo.

Si llevas a cabo la alegoría más adelante, el eje es la acción y el engranaje es la lógica. De aquí se deduce que la caja de engranajes actúa como un enlace para garantizar la transmisión del par, es decir, los datos en la aplicación. Debe apoyar el entorno de trabajo ideal de los mecanismos.

acción

Como se mencionó anteriormente, esta es la acción en sí y la lógica de qué energía transmitir (en nuestro caso, datos).

Y entonces vamos. Mi bici

reductor:

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

Sí, este es todo mi reductor. En este momento tal vez habrá una pequeña brecha en los patrones, ¿cómo? sacamos la lógica de reducer'a ..? Si ¡Te digo que sacamos la lógica de reducer'a!

Echemos un vistazo a la acción:

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

Por el bien de esto, sacamos a relucir la lógica responsable de transferir datos a la tienda. Quedaba reductor para garantizar el funcionamiento de todo el mecanismo. Y debe hacerlo bien sin distraerse con cosas que no le conciernen. Y solo podemos observar el orden de donde crecen las piernas y, si es necesario, encontrar y arreglar o complementar rápidamente.

Vale la pena señalar. Eliminamos las constantes. Sí y cambia también. Lo que permitió reducir la complejidad de la ejecución de O (1) en reducer'e.

Este es solo un boceto de ejemplo que puede expandir y eliminar combineReducers. Ampliar, complementar y cambiar sus necesidades es muy bueno, tomar una herramienta y hacerla ideal para sus tareas.

Y lo más importante que quiero decir.

Se inteligente. beee