初入redux -01
阿新 • • 發佈:2018-02-05
bject ssi span sig als 如何 回放 輸入 pre
createStore用來生成Store,fn形式為(state, action) => state的純函數,返回新的state而不是修改的
import { createStore } from ‘redux‘;
const store = createStore(fn);
Store對象包含所有數據,state就是Store在某個時刻的數據快照,當前時刻的state可以用store.getState()獲取
import { createStore } from ‘redux‘; const store = createStore(fn); const state = store.getState()
改變內部 state 的唯一方法是 dispatch 一個 action(store.dispatch()),action只是一個用來描述已發生事件的對象
// action 可以被序列化,用日記記錄和儲存下來,後期還可以以回放的方式執行 store.dispatch({ type: ‘INCREMENT‘ }); // 1 store.dispatch({ type: ‘INCREMENT‘ }); // 2 store.dispatch({ type: ‘DECREMENT‘ }); // 1
store.dispatch({ type: ‘ADD_TODO‘, payload: ‘Learn Redux‘ });
引用官方原話-- 為了描述action如何改變state tree 需要編者reducers,Reducer只是一些純函數(固定輸入=>固定輸出) 隨著應用變大,可以把reducers拆成多個小reducers,分別獨立操作state tree的不同部分
function visibilityFilter(state = ‘SHOW_ALL‘, action) { switch (action.type) { case ‘SET_VISIBILITY_FILTER‘: return action.filter default: returnstate } } function todos(state = [], action) { switch (action.type) { case ‘ADD_TODO‘: return [ ...state, { text: action.text, completed: false } ] case ‘COMPLETE_TODO‘: return state.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: true }) } return todo }) default: return state } } import { combineReducers, createStore } from ‘redux‘ let reducer = combineReducers({ visibilityFilter, todos }) let store = createStore(reducer)
初入redux -01