読者です 読者をやめる 読者になる 読者になる

0neiric k0uh0t

開発BLOG

Reduxとは何か

Reactはわかってきたけど、Reduxって微妙だなって方向け。(つまり私)

Reduxとは

stateを管理するためのライブラリ。

要素は以下のようなもの。

  • Action
  • ActionCreater
  • Store
  • State
  • Reducer

Action

「何をする」という情報を持ったオブジェクト

ActionCreater

Actionを作成するメソッド

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

Actionをdispatch

dispatch(addTodo(text))

Store

Storeはstateを保持していて、アプリケーション内で一つ存在して、一つのstateを保持している。

  • stateを保持
  • getState()の提供
  • dispatch(action)を提供
  • リスター登録のためのsubscribe(listener)を提供

State

アプリでの状態を表す

dispatchされたactionとstateをReducerへ渡す

Storeを作成する際にStateを変更するためのメソッドであるReducerを一つ登録する。 Storeはdispatchされると、引数のアクションと現在保持しているStateをReducerへ渡して、新しいStateを作成する。

Reducer

reducerは、actionとstateから新しいstateを作成して返すメソッド。

データの流れ

Reduxのデータフローは一方向ということ。

  1. store.dispatch(action)を呼ぶ
  2. storeは受けたactionと保持しているstateをreducerへ渡す
  3. 子reducerの返したstateを親reducerがまとめて一つのツリー状のstateを返す
  4. reducerが作成した新しいstateをstoreが保存する

ほとんどこれを参考に書きました。

qiita.com