記事のこの部分は、Reduxの成分を理解することについてです。それらはとても必要ですか、それらの類似物は何ですか。useReducerフックのより便利な代替手段も提案されます。
実際、Reduxは再現しません。代わりに、次のパートでは、MobXを使用してより優れたアーキテクチャを設計する方法について説明します。次の部分は主に、MobXでのプロジェクトが、制御されていない変更で混乱していることが判明した人向けです。
記事のこの部分では、次のことを示したいと思います。
レデューサーは、新しい状態を取得するための通常の純粋関数の類似物です。
セレクターは、データを返す通常のメモ化された関数に類似しています。
ディスパッチ+アクション+アクションクリエーターは通常の関数呼び出しに類似しており、ディスパッチ、アクション、アクションクリエーターへの分割は不要であり、場違いで使用されることがよくあります。
この記事では、ボイラープレートを削減するためのReduxToolkitやその他のライブラリについては説明しません。Reduxが最初に使用された方法と同じです。Reduxライブラリの開発者が登場したストアコードの同様の構造は、MobXやVuexなどの他の状態管理者にRedux Toolkitがよりユーザーフレンドリーな形式で登場する前に存在していたことに注意してください（私は時々それについて言及します） 、MobXに似ているので、私は彼に少し精通しています）。
前編の内容
1つのストレージ（ストア）と複数のストレージ
片面アプローチには、長所と短所の両方があります。しかし、VuexおよびMobXプロジェクトは、複数のストアでうまく機能します。さらに、プロジェクト内の店舗の存在はオプションです。ただし、データとロジックをプログラムの他の部分から分離すること、およびデータをロジックから分離することにより、開発中に追加の機会と利便性が提供されます。
" " , . , ( , 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 - .
useReducerと同様の機能は、useStateを介して手動で実行できますが、これは長くて不便です。でも毎回できるわけではなく、別々に取り出してみました。より読みやすく使いやすいコードを書くために、useStateWithUpdatersフックを作成しました。以下はその使用例です。
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>
);
};
その実装は問題にあります。TypeScriptバージョン
があります。
また、少し改善することもできます。フック自体の実装で新しい状態を前の状態と組み合わせて、常に「... prevState」と記述する必要がないようにします。