Redux

ReduxはFluxに基づくステータス管理ライブラリであり、フェイスブック上でクライアントWebアプリケーションのために使用されるアプリケーションアーキテクチャである.

特長

中央化

Reduxはstoreという場所ですべての状態を管理します.これらの機能により、ステータスを管理する場所を考慮する必要がなくなり、ステータスを簡単に保存および使用できます.

読み取り専用ステータス

Ruduxはステータスを読み取り専用と見なします.ステータスを変更するには、一部のステータスではなく、ステータス全体を変更する必要があります.すなわち,勝手に状態を変更することはできず,actionを無条件に送信しなければならない.これにより、時間軸のように状態の変化をチェックしたり、以前の状態に戻ったりすることができます.

Reducer

アクションを扱う関数をReducerと呼ぶ.Reducerは情報を受信し、ステータスを更新する方法を定義します.これは純粋な関数でなければなりません.すなわち、非同期処理はできない.

Reduxの基本構造

const { createStore } = require("redux");

const initialState = {
  count: 0,
};

const reducer = (prevState = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: prevState.count + 1 };
    case "DECREMENT":
      return { count: prevState.count - 1 };
    default:
      return prevState;
  }
};

const increment = () => {
  return {
    type: "INCREMENT",
  };
};
const decrement = () => {
  return {
    type: "DECREMENT",
  };
};

const store = createStore(reducer, initialState);

store.dispatch(increment());
console.log(store.getState());	// { count: 1 }

store.dispatch(decrement());
console.log(store.getState());	// { count: 0 }

createStore():Reduxが提供するstore作成関数

reducer():actionの関数を受信して処理

initialState:storeの初期状態

Reduxで分割

Reduxを使用すると、reduceとactionのコード量が増加し始めます.このため、複雑さを低減するために、以下の構造を採用することができる.UserとPostで例をあげましょう参考として,ノードモジュールシステムをノードとして動作させ,端末環境で検証した.
いったいこうぞう

.
├── actions
│   ├── post.js
│   └── user.js
└── reducers
    ├── index.js
    ├── post.js
    ├── reducer.js
    └── user.js

action/user.js

const logIn = (data) => {
  return {
    type: "LOGIN",
    data,
  };
};

const logOut = () => {
  return {
    type: "LOG_OUT",
  };
};

module.exports = { logIn, logOut };

action/post.js

const addPost = (data) => {
  return {
    type: "ADD_POST",
    data,
  };
};

module.exports = { addPost };

reducers/index.js

const { createStore } = require("redux");
const reducer = require("./reducer");
const { logIn, logOut } = require("../actions/user");
const { addPost } = require("../actions/post");

const initialState = {};

const store = createStore(reducer, initialState);
store.subscribe(() => {
  console.log("changed");
});

store.dispatch(
  logIn({
    id: 1,
    name: "Leo",
    admin: "true",
  })
);
console.log("1: ", store.getState());

store.dispatch(addPost({ userId: 1, id: 1, content: "Hi, Redux" }));
console.log("2: ", store.getState());

store.dispatch(addPost({ userId: 1, id: 2, content: "Hi, Redux-thunk" }));
console.log("3: ", store.getState());

store.dispatch(logOut());
console.log("4: ", store.getState());

*reducers/reducer.js

const { combineReducers } = require("redux");
const userReducer = require("./user");
const postReducer = require("./post");

module.exports = combineReducers({
  user: userReducer,
  post: postReducer,
});

Reduxは、combineReducersReduxという関数を提供し、reduce関数をマージします.

reducers/user.js

const initialState = {
  user: {
    isLoggedIn: false,
    data: null,
  },
};

const userReducer = (prevState = initialState, action) => {
  switch (action.type) {
    case "LOGIN":
      return {
        ...prevState,
        user: {
          isLoggedIn: true,
          data: action.data,
        },
      };
    case "LOG_OUT":
      return {
        ...prevState,
        user: {
          isLoggedIn: false,
          data: null,
        },
      };
    default:
      return prevState;
  }
};

module.exports = userReducer;

reducers/post.js

const initialState = [];

const postReducer = (prevState = initialState, action) => {
  switch (action.type) {
    case "ADD_POST":
      return [...prevState, action.data];
    default:
      return prevState;
  }
};

module.exports = postReducer;