Redux 私的まとめ

Reduxとは

state（状態）を容易に管理をするためのフレームワークのこと
引用：Redux 入門 〜Reduxの基礎を理解する〜

ReduxのみでTodoアプリ作成

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
/********************************************/
//stateを初期化
/********************************************/
const initialState = {
  task: '',
  tasks: []
};
/********************************************/
//Reducerを定義
/********************************************/
// Reducerは状態を変化させる関数
// Actionをみて状態を変化させる
function tasksReducer(state = initialState, action) {
  switch (action.type) {
    case 'INPUT_TASK':
      return {
        ...state,
        task: action.payload.task
      };
    case 'ADD_TASK':
      return {
          ...state,
        //   concatは配列同士を結合して新しい配列を作る
        //   結合した配列を新しく作る(ディープコピー)
        tasks: state.tasks.concat([action.payload.task])
      };
    default:
      return state;
  }
    
}
/********************************************/
// Store生成
/********************************************/ 
// Storeを作るにはReducerを引数にする
// これは4つのメソッドを持っている
//      ・dispatch(Action)
//          Action発行
//      ・subscribe()
//          Storeの状態を監視する
//          状態が変わったときに好きな処理を実行できる
//      ・getState
//          今の状態が見れる
//      ・relpaceReducer
//          通常はStoreに関連付けられるReducerは1つだがその制限をなんとかできる

const store = createStore(tasksReducer);
/********************************************/ 
// ActionCreate
/********************************************/
// ActionCreateなんて名前だけどただのオブジェクトを作ってるだけ
// ブラウザからのタスク入力
const inputTask = (task) => ({
  type: 'INPUT_TASK',
  payload: {
    task
  }
});
// タスクを追加するAction
const addTask = (task) => ({
  type: 'ADD_TASK',
  payload: {
    task
  }
});
// コンポーネント
function TodoApp({ store }) {
  const { task, tasks } = store.getState();
  return (
    <div>
      <input type="text" onChange={(e) => store.dispatch(inputTask(e.target.value))} />
      <input type="button" value="add" onClick={() => store.dispatch(addTask(task))} />
      <ul>
        {
          tasks.map(function(item, i) {
            return (
              <li key={i}>{item}</li>
            );
          })
        }
      </ul>
    </div>
  );
}
// 描画
function renderApp(store) {
  render(
    <TodoApp store={store} />,
    document.getElementById('root')
  );
}
//Storeが変更されたときに再描画
store.subscribe(() => renderApp(store));
renderApp(store);

参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

コードは上記書籍参考。
コメントは自分なりのまとめ