Skip to content

Latest commit

 

History

History
93 lines (71 loc) · 3.83 KB

redux.md

File metadata and controls

93 lines (71 loc) · 3.83 KB

Reduxの概要

はじめに

初歩的な概念しか記載していませんが、以下の用語やデータフローは最低限理解しておきましょう。さらに理解を深めたい場合は公式ドキュメントを参照してください。

Reduxの全体像

3原則

http://rackt.org/redux/docs/introduction/ThreePrinciples.html

1.Single source of truth(ソースは1つだけ)
アプリケーション全体の状態(state)はツリーの形で1つのオブジェクトで作られ、1つのストアに保存される。stateが保存しやすいので、ユニバーサルアプリケーションがつくりやすい。stateが1つだから、デバッグしやすい、開発しやすい。
2.State is read-only(状態は読み取り専用)
状態を変更する手段は、変更内容をもったActionオブジェクトを発行して実行するだけ。ビューやコールバックが状態を直接変更させることはできない。変更は一つずつ順番に行なわれる。Actionはオブジェクトなので、保存可能であり、テストしやすい。
3.Mutations are written as pure functions(変更はすべてpureな関数で書かれる)
アクションがどのように状態を変更するかをReducerで行う。Reducerは状態とアクションを受けて新しい状態を返す関数です。現在のstateを変更することはせずに、新しいstateオブジェクトを作って返すというのがポイント。最初はアプリケーションで一つのReducerを用意して、巨大化してきたらReducerを分割していく。

用語

Action

  • アプリケーションからの情報をstoreへ送る為のオブジェクト
  • store.dispatch()でstoreへ送られる
  • 何を行なうものかを識別するためにtypeプロパティを必ず持つ。このtypeをActionTypeと呼ぶ。
const ADD_TODO = 'ADD_TODO';
{
  type: ADD_TODO,
  text: 'Build my first Redux app'
};

ActionCreator

Actionを作る関数です。

function addTodo(text) {
  return {
    type: ADD_TODO,
    text: text
  };
}

dispatchするときはcreatorで作成したaction()を渡します。

dispatch(addTodo(text));

Store

役割

  • stateを保持する
  • stateへアクセスするためのgetState()を提供する
  • stateを更新するためのdispatch(action)を提供する
  • リスナーを登録するためのsubscribe(listener)を提供する

storeは必ず1つのみ。stateごとにロジックを分割したい場合は、storeを分割せずにreducer compositionを使用してください。

storeをつくるには、combineReducerでつくられたreducerをcreateStore()へ渡します。

import { createStore } from 'redux';
import todoApp from './reducers';
const store = createStore(todoApp);

Reducer

  • 現在のstateとactionを受けて新しいstateを返すだけの純粋なメソッドです。
(previousState, action) => newState;

reducerの中で以下のことをやってはいけません

  • 引数のstate, actionインスタンスの値を変更する
  • 副作用を起こす(APIを呼んだり、ルーティングを変えるなど)
  • 毎回値が変わるもの(Date.now()やMath.random())を扱う

Middleware