Cette partie de l'article portera sur la compréhension des ingrédients de Redux. Sont-ils si nécessaires, quel est leur analogue. Une alternative plus pratique au crochet useReducer sera également proposée.
En fait, je ne reproduirai pas Redux. Au lieu de cela, la partie suivante décrira comment concevoir une meilleure architecture à l'aide de MobX. La partie suivante s'adresse principalement à ceux dont les projets sur MobX se sont avérés déroutants, avec des changements incontrôlés.
Dans cette partie de l'article, je veux montrer que:
les réducteurs sont des analogues de fonctions pures ordinaires pour obtenir un nouvel état.
les sélecteurs sont analogues aux fonctions mémorisées régulières qui renvoient des données.
Les créateurs de répartition + action + action sont analogues aux appels de fonction normaux, et la division entre les créateurs d'envoi, d'action et d'action est souvent inutile et utilisée à sa place.
L'article ne couvrira pas le Redux Toolkit et d'autres bibliothèques pour réduire le passe-partout. Exactement la façon dont Redux a été utilisé à l'origine. Notez qu'une structure similaire du code de magasin, à laquelle les développeurs de la bibliothèque Redux sont venus, existait avant l'apparition du Redux Toolkit sous une forme plus conviviale dans d'autres gestionnaires d'états, comme MobX, Vuex (je le mentionnerai parfois , car il est similaire à MobX, et je le connais un peu).
Contenu de la première partie
Un stockage (magasin) vs plusieurs stockages
Fonction de mutation réductrice vs pure. Violation SOLIDE
Sélecteur vs fonction mémorisée qui renvoie des données
Logique métier dans les magasins MobX vs logique métier dans les intergiciels
Créateurs d'action, actions, répartition vs appels de fonction directs
Supplément - avez-vous besoin de useReducer?
Un stockage (magasin) vs plusieurs stockages
L'approche unilatérale présente à la fois des avantages et des inconvénients. Mais les projets Vuex et MobX fonctionnent très bien avec plusieurs magasins. De plus, la présence de magasins dans le projet est facultative. Mais séparer les données et la logique pour travailler avec elles du reste du programme, ainsi que séparer les données de la logique, offrent des opportunités et une commodité supplémentaires pendant le développement.
" " , . , ( , 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 - .
Une fonctionnalité similaire à useReducer peut être effectuée manuellement via useState, mais c'est long et peu pratique. Mais vous ne pouvez pas le faire à chaque fois, mais le retirer séparément, ce que j'ai fait. J'ai écrit un hook useStateWithUpdaters pour écrire du code plus lisible et utilisable. Voici un exemple de son utilisation:
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>
);
};
Vous pouvez trouver sa mise en œuvre en cause .
Il existe une version TypeScript .
Vous pouvez également l'améliorer un peu - combiner le nouvel état avec le précédent dans l'implémentation du hook lui-même, de sorte que vous n'ayez pas à écrire constamment "... prevState".