Reduxのサンプルスクリプト

Reduxのサンプルスクリプト

Reduxのサンプルスクリプトです。Reduxはアプリケーションの状態管理を容易にするための仕組みです。アプリケーションの状態をpredictableに維持します。

Reduxにおけるpredictableは以下により実現されます。

  • アプリケーション全体の状態が単一のロケーションに保存される。
  • アプリケーションの状態はread-onlyであり、アクションを通してのみ変更される。
  • 最終的なあるべき状態を指定する。

Reduxにおいてアプリケーションの状態は単一のロケーションであるStoreに保存されます。Storeはアプリケーションからはread-onlyであり、状態を更新する場合は必ずアクションを通してreducerを実行します。

reducerでは以下は禁止です。

  • 引数の値を変更すること。
  • APIコールのような副作用を発生させること。
  • 非純粋関数を呼び出すこと。

サンプルコードではaddColorremoveColorがアクションでfavoriteColorsがreducerです。

var store = Redux.createStore(favoriteColors);にてストアを作成してreducerを登録します。

store.dispatch(addColor("blue"));がアクションの呼び出しです。

store.subscribe(render);により状態が変更されるたびにrenderが呼び出されます。

<!DOCTYPE html>
<html>
  <head>
    <title>Favorite Colors!</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.js"></script>
  </head>
  <body>
    <script>
      function addColor(value) {
        return {
          type: "ADD",
          color: value
        };
      }

      function removeColor(value) {
        return {
          type: "REMOVE",
          color: value
        };
      }

      function favoriteColors(state, action) {
        if (state == undefined) {
          state = [];
        }

        if (action.type === "ADD") {
          return state.concat(action.color);
        } else if (action.type === "REMOVE") {
          return state.filter(function(item) {
            return item !== action.color;
          });
        } else {
          return state;
        }
      }

      var store = Redux.createStore(favoriteColors);
      store.subscribe(render);

      function render() {
        console.log(store.getState());
      }

      store.dispatch(addColor("blue"));
      store.dispatch(addColor("yello"));
      store.dispatch(addColor("green"));
      store.dispatch(addColor("red"));
      store.dispatch(addColor("gray"));
      store.dispatch(addColor("orange"));
      store.dispatch(removeColor("gray"));

      console.log(store.getState());
    </script>
  </body>
</html>