零. 介紹
隨著 JavaScript 單頁應用開發(fā)日趨復雜檬嘀，JavaScript 需要管理比任何時候都要多的 state （狀態(tài)) . Redux 試圖讓 state 的變化變得可預測碰酝。這些限制條件反映在 Redux 的三大原則中。
三大原則
- 單一數(shù)據(jù)源:
- 整個應用的 state 被儲存在一棵 object tree 中，并且這個 object tree 只存在于唯一一個 store 中矛洞。
- State 是只讀的
- 唯一改變 state 的方法就是觸發(fā) action，action 是一個用于描述已發(fā)生事件的普通對象。
- 使用純函數(shù)來執(zhí)行修改
- 為了描述 action 如何改變 state tree 剂跟，你需要編寫 reducers减途。
一. 幾個概念
以上提及了幾個概念: Action, Reducer ,Store
Action
Action 是把數(shù)據(jù)從應用傳入到store的有效荷載. 也是store 數(shù)據(jù)的唯一來源. 一般來說你會通過 store.dispatch() 將 action 傳到 store。
Reducer
Reducers 指定了應用狀態(tài)的變化如何響應 actions 并發(fā)送到 store 的曹洽，記住 actions 只是描述了有事情發(fā)生了這一事實鳍置，并沒有描述應用如何更新 state。
Store
store是把Action和Reducer聯(lián)系在一起的對象. 它提供很多方法,方便操作
- 維持應用的 state送淆；
- 提供
getState()方法獲取 state税产； - 提供
dispatch(action)方法更新 state； - 通過
subscribe(listener)注冊監(jiān)聽器; - 通過
subscribe(listener)返回的函數(shù)注銷監(jiān)聽器偷崩。
二.使用流程
store 使用 createStore() 進行創(chuàng)建.
- 寫法如下, 就把 reducers 和store 聯(lián)系起來了.
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
- store 發(fā)起一個 action
// 定義action
const ADD_TODO = 'ADD_TODO'
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
// 發(fā)起一個 action
store.dispatch(addTodo('Learn about actions'))
- 定義reducer處理 ADD_TODO
import {
ADD_TODO,
} from './actions'
function todoApp(state = initialState, action) {
switch (action.type) {
case ADD_TODO:
return Object.assign({}, state, {
todos: [
...state.todos,
{
text: action.text,
completed: false
}
]
})
default:
return state
}
}
-
subscribe(listener)添加監(jiān)聽者
store.dispatch(addTodo('Learn about actions'))
上面的方法執(zhí)行完成后.這個新的樹就是應用的下一個 state辟拷！所有訂閱 store.subscribe(listener) 的監(jiān)聽器都將被調(diào)用；監(jiān)聽器里可以調(diào)用 store.getState() 獲得當前 state阐斜。
三.幾個方法
createStore()
通過上面的簡單流程可以看出, createStore() 返回的 store 的重要性. store提供的幾個方法也是及其重要,
- 簡單實現(xiàn)
connect()
React 數(shù)據(jù)傳遞是單向通過 props 傳遞, 容器組件就是使用 store.subscribe() 從 Redux state 樹中讀取部分數(shù)據(jù)衫冻，并通過 props 來把這些數(shù)據(jù)提供給要渲染的組件。你可以手工來開發(fā)容器組件谒出，但建議使用 React Redux 庫的 connect() 方法來生成隅俘，這個方法做了性能優(yōu)化來避免很多不必要的重復渲染。（這樣你就不必為了性能而手動實現(xiàn) React 性能優(yōu)化建議 中的 shouldComponentUpdate 方法到推。）
- 簡單實現(xiàn)
四.特殊組件
Provider
在和 搭配 React 使用的時候, connect()是必不可少的方法. 所有容器組件都可以訪問 Redux store考赛，所以可以手動監(jiān)聽它。一種方式是把它以 props 的形式傳入到所有容器組件中莉测。但這太麻煩了颜骤，因為必須要用 store 把展示組件包裹一層，僅僅是因為恰好在組件樹中渲染了一個容器組件捣卤。
建議的方式是使用指定的 React Redux 組件 <Provider> 來 魔法般的 讓所有容器組件都可以訪問 store忍抽，而不必顯式地傳遞它。只需要在渲染根組件時使用即可董朝。
- 簡單實現(xiàn)
五.總結
