Esta parte do artigo abordará a compreensão dos ingredientes do Redux. Eles são tão necessários, qual é o seu análogo. Uma alternativa mais conveniente para o uso do gancho Redutor também será proposta.
Na verdade, não vou reproduzir o Redux. Em vez disso, a próxima parte descreverá como projetar uma arquitetura melhor usando MobX. A próxima parte é principalmente para aqueles cujos projetos no MobX acabaram sendo confusos, com mudanças descontroladas.
Nesta parte do artigo, quero mostrar que:
redutores são análogos de funções puras comuns para a obtenção de um novo estado.
os seletores são análogos às funções memoized regulares que retornam dados.
Os criadores de despacho + ação + ação são análogos às chamadas de função regulares, e a divisão em criadores de despacho, ação e ação é freqüentemente desnecessária e usada fora do lugar.
O artigo não cobrirá o Redux Toolkit e outras bibliotecas para reduzir o clichê. Exatamente como o Redux foi originalmente usado. Observe que uma estrutura semelhante do código da loja, que os desenvolvedores da biblioteca Redux chegaram, existia antes do aparecimento do Redux Toolkit de uma forma mais amigável em outros gestores de estado, como MobX, Vuex (às vezes mencionarei isso , porque é semelhante ao MobX, e estou um pouco familiarizado com ele).
Conteúdo da primeira parte
Um armazenamento (armazenamento) vs vários armazenamentos
Redutor vs função de mutação de estado puro. Violação SÓLIDA
Seletor vs função memoized que retorna dados
Lógica de negócios em lojas MobX vs lógica de negócios em middleware's
Criadores de ação, ações, envio vs chamadas de função direta
Suplemento - você precisa usarRedutor?
Um armazenamento (armazenamento) vs vários armazenamentos
A abordagem unilateral tem vantagens e desvantagens. Mas os projetos Vuex e MobX funcionam muito bem com várias lojas. Ainda mais, a presença de lojas no empreendimento é opcional. Mas separar dados e lógica para trabalhar com eles do resto do programa, bem como separar dados da lógica, fornece oportunidades adicionais e conveniência durante o desenvolvimento.
" " , . , ( , localStorage/sessionStorage, ) , . Redux , , .
Reducer vs . SOLID
- , , Redux, . , , , () - .
- ugly switch O(n), actions . O(n) , 60 . – . swith - [actionNameKey][function] .
- , , , , .
3 SOLID GRASP
, . , / / . . . " SOLID" " ". : " , SOLID, , , ". . - , /. , , , .
" ". , , . .
single-responsibility principle (SRP)
, - . . actions. actions. , . , combineReducers.
/
/ , :
: , .
: , , .
, .
action , . . ( JS ), . , action-.
, . , , Redux - actions , , , . , actions .
LSP - , , , .
https://medium.com/webbdev/solid-4ffc018077da - , : " , , ."
, . , LSP, . , . " ..." , .
. , , , switch, , action -.
.
(High Cohesion) GRASP
, switch, . , . . action.type. , case . / /. - , .
SRP SOLID. . , actions, . , action, .
. . , .
. , – . , - action, . - . - , , . :
case 'todos/todoAdded': {
return {
...state,
todos: [
...state.todos,
action.paylod.newTodo
]
}
}
:
function todoAdded(state, newTodo) {
return {
...state,
todos: [
...state.todos,
newTodo
]
}
}
- , . type action, Redux, . - . , , / : todoStore['todoAdded'].
vs ,
Redux - . , - . .
MobX (computed values). , , JS . . , Vuex - .
Redux, , middleware. . MobX .
- MobX vs - middleware's
Redux - , , .
Vuex MobX , action API -. Vuex - . , . -, ( ). MVC . MVC wikipedia - MVC, . , Vuex MobX - MVVM, MVC.
, , . , . , , AngularJS 1.x. , .
- . 2 (, api ), . – , . , .
, - , , , . () .
Action creators, actions, dispatch VS
Redux - . .
, , - . Redux pub/sub (-).
Pub/sub ( ) , .
, , :
. , ( ) .
, - , . , . - React . , .. react-.
Redux action-? :
, middleware;
middleware, ;
, , .
? . , - , . actions - . 3- actions . 3 actions ( ).
1. middleware- ( ). , ?
Action, middleware, . .
. dispatch middleware-? -, . , .. . , middleware- middleware .
-, .
2. Middleware . . action ? . , .
3. actions . actions action , . .
- useReducer?
, - , .
useReducer , . . actions, .. , . useReducer - .
Funcionalidades semelhantes a useReducer podem ser feitas manualmente por meio de useState, mas isso é longo e inconveniente. Mas você não pode fazer isso todas as vezes, mas tirar separadamente, o que eu fiz. Eu escrevi um gancho useStateWithUpdaters para escrever um código mais legível e utilizável. Abaixo está um exemplo de seu uso:
const updaters = {
subtract: (prevState, value) => (
{ ...prevState, count: prevState.count - value }
),
add: (prevState, value) => (
{ ...prevState, count: prevState.count + value }
),
};
const MyComponent = () => {
const [{ count }, {add, subtract}] =
useStateWithUpdaters({ count: 0 }, updaters);
return (
<div>
Count: {count}
<button onClick={() => subtract(1)}>-</button>
<button onClick={() => add(1)}>+</button>
</div>
);
};
Você pode encontrar sua implementação em questão .
Existe uma versão TypeScript .
Você também pode melhorá-lo um pouco - combine o novo estado com o anterior na implementação do próprio gancho, para que você não tenha que escrever constantemente "... prevState".