こんにちは！
今回はreduxのイメージを掴む為に、簡単なカウンターアプリを作って解説していきます。
初学者の方は是非一緒に手を動かしながらやって見て下さい。
サンプルの完成像
サンプルコード
https://codesandbox.io/s/elastic-keller-54g4b?file=/src/components/redux.jsx
解説
大まかな手順は
- reducerを作る
- storeを作る
- 1. Providerで囲いアプリケーション全体でstoreを共有する準備をする
- カウンターアプリのDOM部分を作り、dispatch関数イベントを叩けるようにする
という流れです。
1. reducerを作る
redux内の状態を変更するには、reducerを用います。
reducerはactionのメッセージに応じて新しいstoreを作り出す関数です。
reducerでしかstoreは更新出来ません。
今回はadd_countというactionを受け取った際にcount+1するreducerを作ります。
//初期状態を定義
const initialState = { count: 0 };
//Reducer作成
export const counter = (state = initialState, action) => {
//actionの種類毎にstoreの更新を分類。今回はdefaultとadd_countだけ
switch (action.type) {
case "add_count":
const newCount = state.count + 1;
//stateはオブジェクトで返す
return { count: newCount };
default:
return state;
}
};2. storeを作る
reduxではアプリケーションの状態をstoreという巨大なオブジェクトで管理していきます。
今回のサンプル用のstoreを作って行きましょう。
createStoreを用います。引数のオプションがいくつかありますが、第一引数にはreducerを入れます。
詳しくは
公式の使い方をみて下さい。
引数には先程①で作ったreducerのcounterを入れています。
//store作成
const store = createStore(counter);これでstoreが作れました。
3. Providerで囲いアプリケーション全体でstoreを共有する準備をする
reduxを用いたs取れ管理をするにはProviderで要素をネストする必要があります。propsにはそのアプリケーション内で使うstoreを渡します。
今回はindex.tsxを以下の様に書いています。
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);4. カウンターアプリのDOM部分を作り、dispatch関数イベントを叩けるようにする
さてstoreをアプリケーション全体で共有できる様になったので、実際にDOMを操作してstoreを更新する仕組みを作っていきます。
今回作りたいのは「クリックしたらstoreを更新してcountを+1する」処理です。
まずはDOM部分を作成
const count = useSelector((state) => state.count)
~~~~
//③DOM部分作成
return (
<div>
<button
onClick={handleCount}>+1
</button>
<p>{count}</p>
</div>
)クリックでhandleCountが発火します。
この際に現在のcountの値を表示する為にstoreの値の参照が必要です。
そこでuseSelectorを使います。
今回はconst count = useSelector((state) => state.count)
とする事でcountの値を得ています。
次にクリック後の処理のhandleCountを作っていきます。
const dispatch = useDispatch();
~~~~
const handleCount = () => {
//dispatch関数にactionを渡す
dispatch({
type: "add_count"
}redux内でactionを実行するにはdispatchという関数を使う必要があります。
中身は簡単でactionのadd_countを実行してstoreを更新しています。
これにてカウンターアプリ完成です。
皆さんも手元でこんな感じになりましたか？？
具体的なコードはこちらに残してあるので参考にして下さい。
https://codesandbox.io/s/elastic-keller-54g4b?file=/src/components/redux.jsx
また当ブログではいくつかReact初学者向けのチュートリアルも作っています。
興味があれば是非。