![export default function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([ action.text ])
default:
return state
}
}
export default function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'
export default combineReducers({
todos,
counter
})](https://image.slidesharecdn.com/redux-151219113118/85/Redux-17-320.jpg)
![コード例?階層化したReducer
export default combineReducers({
todos,
counter
})
// 全体のState
{
todos: [
”朝ごはんを食べる”,
”js祭に参加する”,
],
counter
}
こんな感じでStateとconbineReducersが対応してい
る](https://image.slidesharecdn.com/redux-151219113118/85/Redux-19-320.jpg)
搁别诲耻虫について
- 12. コード例 Action Creator function addTodo(text) { return { type: ADD_TODO, text } } アクション用オブジェクトを変えす関数を書く 返すオブジェクトは上記パターンでなくてもOK 非同期アクションは次で説明
- 13. コード例 Action Creator(非同期) export const REQUEST_POSTS = 'REQUEST_POSTS' function requestPosts(reddit) { return { type: REQUEST_POSTS, reddit } } export const RECEIVE_POSTS = 'RECEIVE_POSTS' function receivePosts(reddit, json) { return { type: RECEIVE_POSTS, reddit, posts: json.data.children.map(child => child.data), receivedAt: Date.now() } } export function fetchPosts(reddit) { return dispatch => { dispatch(requestPosts(reddit)) return fetch(`http://www.reddit.com/r/${reddit}.json`) .then(response => response.json()) .then(json => dispatch(receivePosts(reddit, json)) ) } }
- 14. コード例 Action Creator(非同期) export function fetchPosts(reddit) { return dispatch => { dispatch(requestPosts(reddit))?// リクエスト開始アクション return fetch(`http://www.reddit.com/r/${reddit}.json`) .then(response => response.json()) .then(json => dispatch(receivePosts(reddit, json)) // リクエスト完了アクション ) } } 非同期関数の前で1回、コールバックが呼ばれたらさら に1回別のアクション関数を呼ぶ ↑の挙動をするためにredux-thunkと言うミドルウェ アを使う? https://github.com/gaearon/redux-thunk
- 15. コード例 Reducer アクションに応じて状態を変化させる関数を書く Reducerは階層化、モジュール化することができる function todoApp(state = initialState, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) default: return state } }
- 17. export default function todos(state = [], action) { switch (action.type) { case 'ADD_TODO': return state.concat([ action.text ]) default: return state } } export default function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } } import { combineReducers } from 'redux' import todos from './todos' import counter from './counter' export default combineReducers({ todos, counter })
- 18. コード例?階層化したReducer ↑の感じで分割したReducerをcombineReducerでまと める Stateの各メンバがconbineReducersに定義したReducer 名に対応している（次で説明） import { combineReducers } from 'redux' import todos from './todos' import counter from './counter' export default combineReducers({ todos, counter })
- 19. コード例?階層化したReducer export default combineReducers({ todos, counter }) // 全体のState { todos: [ ”朝ごはんを食べる”, ”js祭に参加する”, ], counter } こんな感じでStateとconbineReducersが対応してい る
- 20. コード例 Store ここら辺はほぼ定型です ぶちゃけ1回書いたら後はほとんど変えないです import { createStore } from 'redux' import todoApp from './reducers' // Soreを宣言、Reducerはここで渡す let store = createStore(todoApp); // アクション発行 store.dispatch(addTodo('')); // stateに変化があれば、それをViewに伝える sore.subscribe(()=> { // 現在のStateを取得 var state = store.getState(); // ViewにStateを渡す View(state); });
- 24. Reduxを始めるには 当たり前ですが、grunt、gulpなどのフロン トエンドビルド環境が必要です es6は必須ではないですが、サンプルはes6で 書かれたものが多いので導入した方がスムーズ です
- 26. ご清聴ありがとう ございました