File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 11---
2- title : React Context を用いた簡易 Flux
2+ title : React Context を用いた簡易 Store
33created : 1590563363484
4- tags : []
4+ tags : [react, flux ]
55---
66
77## 課題
88
99- redux を引っ張り出すと大仰になる。Context 下に共有ステートを持ってそこに setState できるだけでよい。
1010- なので、次の 2 つを用意する
1111 - 現在の state を参照する ` const appState = useAppState() `
12- - 現在の state を更新する ` const setAppState = useSetAppState() `
12+ - 現在の state を更新する関数を返す ` const setAppState = useSetAppState() `
1313- ` React.useState() ` と違って分割している理由は、主にパフォーマンス上の理由
14- - 大域な参照なので、可能な限り参照したくない
14+ - 大域な参照なので、可能な限りステートを参照したくない
1515 - ` setState() ` の API は ` (prevState: State) => State ` も取れるので、状態更新用途に限ってはそもそも ` useAppState() ` せずに済むことが多い
1616- でも毎回書いてるけどボイラープレート感強い上に忘れるのでここにメモする
1717
@@ -25,7 +25,7 @@ export type AppState = {
2525 value: number ;
2626};
2727
28- const initialState = {
28+ const initialState: AppState = {
2929 value: 0 ,
3030};
3131
You can’t perform that action at this time.
0 commit comments