React + Rudux を導入してみた！Reduxは慣れるまでが勝負やね

React でTODOリストを開発しているのですが、

今回は、Reduxを導入してみました。

Redux を導入することで、stateをRedux で管理することができるようになります。

メリットとしては、どのコンポーネントも、このRedux で管理されたstate を参照するようになるので、統一した値を参照することができるようになり、

コンポーネント同士のバケツリレーをする必要がなくなるのですね。

vue.js だったら、vuex ってのを使用しますし、

reactだったら、redux

JSのフレームワークを触るなら、このあたりの知識は必須かなと思っております。

今回は、Reduxにstateを更新できるところまで実装できたらいいかな

ということで、早速実装していく！

index.js

import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import App from "./App";

let nextId = 1;
 //action
const addTodo = text => ({
  type: "ADD_TODO",
  id: nextId++,
  todo: text
});

//reducer
const reducer = (state = [], action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [
        ...state,
        {
          id: action.id,
          todo: action.todo
        }
      ];
    default:
      return state;
  }
};
const store = createStore(reducer);

//stateに変更があったら参照できる
store.subscribe(() => {
  console.log(store.getState());
});

//dispatch
store.dispatch(addTodo("test"));

redux を使用する上で重要なのは、

dispatch, action, reducer の考え方

dispatch はaction を呼ぶ

action はreducer を呼ぶ関数

reducer で、reduxで管理しているstate更新

というようなイメージです。

この役割を理解できれば、

あとは、書き方を覚えるだけかな

初見はめちゃ難しく感じるかもですが、

慣れてくると、けっこうシンプルに理解できるようになる気がします。

実際に実務で使用するまでは、ちゃんと理解することはできなさそうだけど

次回は、Reduxに管理したstate をブラウザに表示するところまで実装してみようと思います！