Reduxの構成
以下の4つ
- Action
- Action creator
- Reducer
- Store
Action
アプリからの情報をstoreに送るためのオブジェクト
ActionがStoreに送られるとStoreは新しいstateを作り、それを元にViewが更新される
オブジェクトは以下のプロパティは以下のプロパティをもつ
typeプロパティは必須でその他はオプション
| プロパティ | |
|---|---|
| payload | Actionに伴うデータとして利用可可能 |
| error | エラーを表現するにはtrueにする。 |
| meta | 他の情報を書く |
Action creator
その名の通り
Reducer
送られてきたActionと元のstateを元に新しいstateを返す
Store
アプリに1つのみ
stateを保持してActionがdispatchされるとReducerを読んで処理する
TODOアプリを作る
こちらの書籍を参考にReduxのみで作る
Reducreの定義
ReducerはStoreが保持している状態を変化させる純粋関数
Storeの初期状態は以下
const initialState={
tasks:[]
}
引用：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
Reducerは以下のように定義
function tasksReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_TASK':
return (
...state,
tasks: state.tasks.concat([action.task])
)
default:
return state;
}
}
引用：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
| Reducerの引数 | 説明 |
|---|---|
| 第1 | stateオブジェクト。 |
| 第2 | Actionオブジェクト。どんな操作をしたのかを示す |
Actioncreatorの定義
const addTask = (task) => ({
type: 'ADD_TASK',
payload: {
task
}
})
Actionオブジェクトを返すだけの関数
オブジェクトを返すから()でくくられている
ActionはActionCreatorで作る
Store生成
StoreはcreateStoreで生成する
createStore(reducer,[preloadedState],[enhancer])
| 引数 | 説明 |
|---|---|
| 第1 | Reducerを渡す |
| 第2 | Storeの初期値 |
| 第3 | サドパツール |
| さっき作ったtaskReducerを渡してStoreが作成される。 |
そうして作られてたStoreは4つのメソッドを持つオブジェクトをもっている
- dispatch
- subscribe
- getState
- replaceReducer
dispatchででActionの発行をする、発行って書いてあるけど送信じゃね？わかりやすいの普通そっちだと思う
const addTask = (task) => ({
type: 'ADD_TASK',
payload: {
task
}
})
const store = createStore(tasksReducer)
store.dispatch(addTask(addTask('TASK')))
ActionはActionCreatorで作る
ADD_TASKというtypeのActionがReducerに送信されて状態が変化する
getStateでStoreの状態を見れる
subscribeメソッドを使うとStoreの状態が変更されたたときに呼ばれるコールバック関数を設置できる。言い換えるとdispatchでStoreの状態が変化したときにその変化を監視する役割
最後にreplaceReducer
通常createStoreでStoreを生成する場合、関連付けられるReducerは1つ
Reducerは分割できるひとまとめにするメソッドもあるが分割してそれを動的にロードするならStoreに関連付けているReducerを他のReducerに差し替える必要があるハイここまで何言ってるかわかりません
そんなときにreplaceReducerhが役立つ
とりあえずタスクを追加するReducerと消すそれをつくる
import { createStore, relpaceReducer } from 'redux'
const initialState = {
tasks: []
}
function addReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_TASK':
return {
...state,
tasks: state.tasks.concat([action.payload.task])
}
default:
return state;
}
}
function resetReducer(state = initialState, action) {
switch (action.type) {
case 'RESET_TASK':
return {
...state,
tasks: []
}
default:
return state;
}
}
引用：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
追加は今まで通り、リセットは空の配列にしただけ
今回はここまでにして最後に下の参考書を読んだ感想をいいます。
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
この参考書まじで打ち間違い多いし、入門者向けとは思えないほど説明不足&説明下手で買って損した。読んで悩んだ時間が無駄だった