Redux - revisando a lógica e as ações do redutor

Um dia desses eu estava mexendo com muitos arquivos redux'a, onde, logicamente, os arquivos são retirados em redutores, ações, constantes de tipo de ações. Tudo isso acabou sendo uma tarefa bastante difícil, mantendo todos esses tipos de arquivos em sua cabeça e traçando a lógica. E ... eureka, surgiu a idéia de simplificar a escrita da lógica redux. Talvez criando sua bicicleta, mas quem não tentou escrever suas motos? Mas o principal não é escrever, mas escrever apoio quando . Deixe-me tentar mostrar um pouco a minha visão da minha lógica redux.

Iniciar

E assim temos reduzir:

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

tirado das docas no redux .

ação se parece com:

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

constantes Eu acho que não há necessidade de mostrar.

BOOL

Tentarei descrever o frenesi que sinto ao ler o código, especialmente ao depurar ou expandir a funcionalidade.

• pesquisa - todo o tempo necessário para pressionar Ctrl + F e globalmente Ctrl + Shift + F
• não é visível imediatamente de onde as pernas estão crescendo. Flui do parágrafo acima.
• não, isso é só um pouco, então ainda tenho todo o projeto perfurado por constantes. Não, eu não sou contra constantes, mas por quê? Além disso, se eles são usados ​​junto com o aninhamento, como no exemplo, e se são concatenados de vários, então isso geralmente é um inferno de navegação.
• lógica está embaçada. Em um local de ação em outro, o processamento dessas ações na terceira constante (opcional) é necessário apenas pelas duas.
• Preciso manter muitos arquivos abertos ao desenvolver ou depurar. Flui do parágrafo acima.
  Bem, etc.

Entrada lógica

Talvez pareça estranho e chocante a princípio, mas ainda me parece que este é o lugar para estar. Vou tentar transmitir meu modelo.

redutor

espionado no google

Engrenagem - um mecanismo que altera o torque e a potência. Esta é uma ou mais engrenagens interagindo entre si e reduzindo o número de rotações do motor para uma velocidade de rotação aceitável do nó de execução.

Ou seja, o eixo nele tem uma engrenagem, essa engrenagem transmite rotação para outra engrenagem, que por sua vez gira para seu eixo. Removemos o eixo e a engrenagem é removida com ele. Não é um módulo descontínuo, por assim dizer.

Se você continuar a alegoria, o eixo é a ação e a engrenagem é a lógica. Daqui resulta que a caixa de engrenagens atua como um elo para garantir a transmissão de torque, isto é, dados na aplicação. Deve apoiar o ambiente de trabalho ideal dos mecanismos.

ação

Como mencionado acima, essa é a ação em si e a lógica de que energia transmitir (no nosso caso, dados).

E então vamos lá. Minha bicicleta

redutor:

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

sim, isso é tudo meu redutor. Neste momento, talvez haja uma pequena lacuna nos padrões, como? tiramos a lógica do reducer'a ..? Sim Eu digo, tiramos a lógica do reducer'a !!!

Vamos dar uma olhada na ação:

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

Por isso, criamos a lógica responsável pela transferência de dados para a loja. Redutor permaneceu para garantir a operação de todo o mecanismo. E ele deve fazê-lo bem, sem se distrair com coisas que não lhe dizem respeito. E só podemos observar a ordem em que as pernas crescem e, se necessário, rapidamente encontrar, consertar ou suplementar.

Vale a pena notar. Removemos as constantes. Sim e mude também. O que permitiu reduzir a complexidade da execução de O (1) no reducer'e.

Este é apenas um exemplo de esboço que você pode expandir e remover combineReducers. Expandir, complementar, mudar para as suas necessidades é muito bom, pegar uma ferramenta e torná-la ideal para suas tarefas.

E o mais importante, eu quero dizer.

Seja esperto. beee