Redux學習筆記-----基礎部分
阿新 • • 發佈:2018-07-11
對象 操作 patch http set 自動 返回 html 生成
Action
Action是store數據的唯一來源。需使用store.dispatch()將所需的action傳到store。Action是把服務器響應的數據或者用戶輸入的數據、和其他一些非View的數據傳入store的有效載荷。Action實際上是JS的普通對象。示例:
{ type:"ADD_TODO", //type為必須的字段,值為字符串或存放字符串的變量 text:"我是示例" }
需要註意的是:應該盡可能的減少在action中傳遞的數據。
Action創建函數
Action創建函數只是簡單的返回一個action。示例:
function addTodo(text) { return { type: ADD_TODO, text } }
Redux提供的bindActionCreators()可以自動把多個action創建函數綁定到dispatch()方法上。
Reducer
Reducers 指定了應用狀態的變化如何響應 actions 並發送到 store 的,記住 actions 只是描述了有事情發生了這一事實,並沒有描述應用如何更新 state。
reducer 就是一個純函數,接收舊的 state 和 action,返回新的 state。
(previousState, action) => newState
永遠不要在reducer裏做這些操作:
- 修改傳入參數;
- 執行有副作用的操作,如API請求和路由跳轉;
- 調用非純函數,如Data.now()或Math.random();
reducer一定要保持純凈。只要傳入參數相同,返回計算得到的下一個state就一定相同。沒有特殊情況、沒有副作用、沒有API請求、沒有變量修改,單純執行計算
combinerReducers()方法只是生成一個函數,這個函數用來調用你的一系列reducer,每個reducer根據他們的key來篩選出state中的一部分數據並處理,然後這個生成的函數再將所有reducer的結果合成一個大的對象。//ES6的寫法 import { combineReducers } from ‘redux‘ import * as reducers from ‘./reducers‘ const todoApp= combineReducers(reducers)
Store
Store的職責:
- 維持應用的state;
- 提供 getState() 方法來獲取state;
- 提供 dispatch(action) 方法更新state;
- 通過 subscribe(listener) 註冊監聽器;
- 通過 subscribe(listener) 返回的函數註銷監聽器;
Redux 應用只有一個單一的 store
store的使用示例:
//創建store let store = createStore(todoApp); //打印初始狀態 console.log("初始狀態======》",store.getState()); //每次state更新時,打印日誌 //註意subscribe()返回一個函數用來註銷監聽器 const unsubscribe = store.subscribe(()=>console.log("state有更新=======》",store.getState())) //發起一系列action store.dispatch(addTodo("learn about actions")); store.dispatch(addTodo("learn about reducers")); store.dispatch(addTodo("learn about store")); store.dispatch(toggleTdo(0)); store.dispatch(toggleTdo(1)); store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED)); //停止監聽 unsubscribe();
數據流
Redux應用中數據的生命周期遵循4個步驟:
- 調用 store.dispatch(action) 。 action 就是一個描述“發生了什麽”的普遍對象,可將其理解為通過 store.dispatch 來告訴reducer發生了什麽
- Redux store調用傳入的reducer函數。根據傳入的action.type來更新state
- 根reducer應該把多個子reducer輸出合並成一個單一的state樹。可使用原生的 combineReducers() 輔助函數,也可自己實現
- Redux store保存了根reducer返回的完整的state樹
Redux學習筆記-----基礎部分