Redux入門

安裝

npm install --save redux

react綁定庫和開發者工具

npm install --save react-redux    npm install --save-dev redux-devtools

幾個概念：

1. 　　全部的state以一個對象樹的形式存儲在單一的store中
2. 　　惟一改變state的方法就是觸發action
3. 　　reducer爲一個純函數， 描述如何將一個state轉變爲下一個state,須要對reducer進行拆分
4.        Redux不像Flux，沒有Dispatcher且不支持多個store;

如何建立Redux store存放應用狀態,api是 { subscribe, dispatch, getState };

let store = createStore(reducer)

能夠訂閱更新，也能夠將事件綁定到視圖層

store.subscribe(() => {

　　console.log( store.getState() );

})

state具體是怎麼樣的？

{  todos: [{

　　　　text: 'Eat food',

　　　　completed: true

　　}, {

　　　　text: 'Exercise',

　　　　completed: false

　　}],

　　visibilityFilter: 'SHOW_COMPLETED'  }

改變內部state的方法是dispatch一個action,action 能夠序列化保存，以便回放

store.dispatch({                     //action描述當前發生的事，爲一個對象，type是必須屬性

　　type: 'INCREMENT',

　　payload: 'Learn Redux'

})

reducer把action,state串起來，用來管理整個應用的state;

function visibilityFilter(state = 'SHOW_ALL', action) {

　　if (action.type === 'SET_VISIBILITY_FILTER') {

　　　　return action.filter;

　　} else {

　　　　return state;

　　}

}

function todos(state = [], action) {

　　switch (action.type) {

　　　　case 'ADD_TODO':

　　　　　　return state.concat([{ text: action.text, completed: false }]);

　　　　case 'TOGGLE_TODO':

　　　　　　return state.map((todo, index) =>

　　　　　　　　action.index === index ? { text: todo.text, completed: !todo.completed } : todo

　　　　　　)

　　　　default: return state;

　　}

}

function todoApp(state = {}, action) {

　　return {

　　　　todos: todos(state.todos, action),

　　　　visibilityFilter: visibilityFilter(state.visibilityFilter, action)

　　};

}

Redux的三大原則

• 　　單一數據源
• 　　state是隻讀的，只能經過觸發action
•        使用純函數來執行修改

import { combineReducers, createStore } from 'redux'

let reducer = combineReducers({ visibilityFilter, todos })

let store = createStore(reducer)

 工做流程

1. 用戶發出action       store.dispatch(action);
2. Store 自動調用 Reducer，而且傳入兩個參數：當前 State 和收到的 Action。 Reducer 會返回新的 State 。
3. State 一旦有變化，Store 就會調用監聽函數。   
   store.subscribe(listener);

 

 

 

fff