🏕️ 😧 🌅 Implementierung der Redux-Architektur unter MobX. Teil 1: "Redux Problem Locations" 🤜🏻 ⛴️ 😡

In diesem Teil des Artikels geht es darum, die Inhaltsstoffe von Redux zu verstehen. Sind sie so notwendig, was ist ihr Analogon? Eine bequemere Alternative zum useReducer-Haken wird ebenfalls vorgeschlagen.

Eigentlich werde ich Redux nicht reproduzieren. Stattdessen wird im nächsten Teil beschrieben, wie Sie mit MobX eine bessere Architektur entwerfen. Der nächste Teil richtet sich hauptsächlich an diejenigen, deren Projekte auf MobX sich als verwirrend herausstellten, mit unkontrollierten Änderungen.

In diesem Teil des Artikels möchte ich Folgendes zeigen:

Reduzierstücke sind Analoga gewöhnlicher reiner Funktionen, um einen neuen Zustand zu erhalten.
Selektoren sind analog zu regulären gespeicherten Funktionen, die Daten zurückgeben.
Dispatch + Action + Action-Ersteller sind analog zu regulären Funktionsaufrufen, und die Unterteilung in Dispatch-, Action- und Action-Ersteller ist häufig nicht erforderlich und wird nicht ordnungsgemäß verwendet.

Der Artikel behandelt nicht das Redux Toolkit und andere Bibliotheken zum Reduzieren der Boilerplate. Genau so, wie Redux ursprünglich verwendet wurde. Beachten Sie, dass eine ähnliche Struktur des Geschäftscodes, zu der die Entwickler der Redux-Bibliothek gekommen sind, vor dem Erscheinen des Redux-Toolkits in einer benutzerfreundlicheren Form in anderen Statusmanagern wie MobX, Vuex (ich werde es manchmal erwähnen) existierte , weil es MobX ähnlich ist und ich ihn ein wenig kenne).

Inhalt des ersten Teils

Ein Speicher (Geschäft) gegen mehrere Speicher

Der einseitige Ansatz hat sowohl Vor- als auch Nachteile. Vuex- und MobX-Projekte funktionieren jedoch hervorragend mit mehreren Filialen. Darüber hinaus ist das Vorhandensein von Filialen im Projekt optional. Die Trennung von Daten und Logik für die Arbeit mit ihnen vom Rest des Programms sowie die Trennung von Daten von Logik bieten jedoch zusätzliche Möglichkeiten und Komfort während der Entwicklung.

" " , . , ( , 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 - .

Funktionen, die useReducer ähneln, können manuell über useState ausgeführt werden, dies ist jedoch langwierig und unpraktisch. Aber Sie können es nicht jedes Mal tun, sondern es separat herausnehmen, was ich getan habe. Ich habe einen useStateWithUpdaters-Hook geschrieben, um besser lesbaren und verwendbaren Code zu schreiben. Unten ist ein Beispiel für seine Verwendung:

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>
  );
};

Sie finden die Implementierung in Frage .

Es gibt eine TypeScript-Version .

Sie können es auch ein wenig verbessern - kombinieren Sie den neuen Status mit dem vorherigen in der Implementierung des Hooks selbst, damit Sie nicht ständig "... prevState" schreiben müssen.

Implementierung der Redux-Architektur unter MobX. Teil 1: "Redux Problem Locations"