私は1週間前にReactを学び始めました。そして、必然的に国家の問題と、コンポーネントがどのようにアプリケーションの他の部分と通信することになっているのでしょうか。私は周りを検索し、Reduxは今月の味であるようです。私はすべてのドキュメントを読み、実際にはかなり革命的なアイデアだと思う。ここに私の考えがあります:Reduxはグローバル状態を賞賛していませんか?
国家は、一般的にかなり悪く、プログラミングのバグの大きな原因であることに合意しています。アプリ全体に散らばっているのではなく、変化するアクションを出さなければならないグローバルな状態ツリーにすべてが集中しているのはなぜですか?興味深いですね。すべてのプログラムが状態を必要とするので、1つの不純な空間にそれを貼り付け、そこから変更するだけでバグを追跡しやすくなります。そして、個々の状態要素をReactコンポーネントに宣言的にバインドし、自動再描画させ、すべてが美しいものにすることもできます。
しかし、このデザイン全体について2つの質問があります。 1つでは、なぜ状態ツリーは不変である必要がありますか?タイムトラベルのデバッグやホットリロードを気にせず、アプリでアンドゥ/リドゥを実装しているとします。これに代えて
case COMPLETE_TODO:
return [
...state.slice(0, action.index),
Object.assign({}, state[action.index], {
completed: true
}),
...state.slice(action.index + 1)
];
:ちょうどこれを行うには持っているので、面倒なようだ
case COMPLETE_TODO:
state[action.index].completed = true;
ないに言及し、私はちょうど学ぶためにオンラインホワイトボードを作っていますし、すべての状態変化がのような単純なものかもしれませんブラシストロークをコマンドリストに追加します。このアレイ全体を複製する(数百回のブラシストローク)後は、非常に高価で時間がかかることがあります。
私はアクションを経由して変異しているUIから独立したグローバル状態ツリーでOKだけど、それは本当に不変である必要はありませんか?このような簡単な実装で何が問題になったのですか(非常に原案は1分で書いています)?
var store = { items: [] };
export function getState() {
return store;
}
export function addTodo(text) {
store.items.push({ "text": text, "completed", false});
}
export function completeTodo(index) {
store.items[index].completed = true;
}
これは、排出されたアクションによって非常に単純かつ効率的に変更されたグローバル状態ツリーです。
"1つでは、なぜ状態ツリーは不変である必要がありますか?" ---データが変更されたかどうかを判断するアルゴリズムを提供する必要があります。任意のデータ構造に対して実装することはできません(変更可能な場合)。 'immutablejs'をとり、' return state.setIn([action。index、 'completed']、true); '定型文を減らすため。 – zerkms
PS: 'return state.map(i => i.index == action.index?{... i、completed:true}:i);' – zerkms