ReactJSが扱うUIのstateを管理するためのフレームワーク
Reactではstateの管理するデータフローにFluxを提案しているが、ReduxはFluxの概念をより扱いやすく設計されている
UserInput -> View -> Action -> dispatch -> state -> state -> reducer
Actionは何をするという情報を持ったオブジェクト
{
type: 'ADD_TODO',
text: 'Build Redux app'
}
ActionCreator
Actionを作成するメソッド。Actionを作るのみ、Storeの
function AddTodo(text){
return {
type: ADD_TODO,
text
}
}
ActionCreatorで生成されたActionをStoreに送る
Storeのinstanceにdispatch(action)を行うことで、Storeへ変更を伝える
Storeはアプリケーションの状態(state)を保持している
アプリケーション内で一つのstateを保持している
stateへのアクセスはgetState(), stateの更新はdispatch(action)、リスナー登録はsubscribe(listener)
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'keep all state in a single tree',
completed: false
}
]
}
dispatchされたactionとstateをReducerへ渡す
storeはdispatchされると、引数のactionと現在保持しているstateをreducerへ私、新しいstateを作成
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
reducerはactionとstateから新しいstateを作成して返すメソッド
Stateを変更する関数はpureな関数
viewのところがReact.js
redux Github
https://github.com/reduxjs/redux
1. Single source of truth
2. State is read-only
3. Mutations are written as pure functions
https://reactjs.org/docs/getting-started.html
https://redux.js.org/index.html
もはやreduxでは、英語のドキュメントの方が質が高く、そこから学ぶのが効率的、という認識が一般化されつつあるな。