カウンターアプリを作ってReduxの流れを掴もう

  • 2021年7月21日
  • 2021年7月21日
  • React
  • 133view

こんにちは!
今回はreduxのイメージを掴む為に、簡単なカウンターアプリを作って解説していきます。

初学者の方は是非一緒に手を動かしながらやって見て下さい。

サンプルの完成像

Image from Gyazo

サンプルコード
https://codesandbox.io/s/elastic-keller-54g4b?file=/src/components/redux.jsx

解説

大まかな手順は

  1. reducerを作る
  2. storeを作る
  3. 1. Providerで囲いアプリケーション全体でstoreを共有する準備をする
  4. カウンターアプリの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を更新しています。

これにてカウンターアプリ完成です。
皆さんも手元でこんな感じになりましたか??

Image from Gyazo

具体的なコードはこちらに残してあるので参考にして下さい。
https://codesandbox.io/s/elastic-keller-54g4b?file=/src/components/redux.jsx

また当ブログではいくつかReact初学者向けのチュートリアルも作っています。
興味があれば是非。

参考

Software Design 2021年8月号

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping