1.什么是Redux
Redux是一个JavaScript状态容器,提供可预测化的状态管理。Redux除了可以和React一起使用外,还支持其他的界面库。
2.三大原则
- 单一数据源(整个应用的state被存储在一个object tree中,并且这个object tree只存在于唯一一个store中。这样可以保证整个数据的唯一性,为维护阅读起来更便捷)
- state是只读的(唯一改变state的方法就是触发action,action是一个用于描述已发生事件的普通对象)
- 使用纯函数来执行修改(为了描述action 如何改变state tree ,你需要编写 reducers。)
3.安装
可以用npm安装稳定版:
npm install --save redux
多数情况下,还可以使用React绑定库和开发者工具:
npm install --save react-redux
npm install --save-dev redux-devtools
4.基本概念
Redux中涉及的主要概念有:Store、State、Action、Reducer
(1) store
store是Redux中保存数据的仓库,它的主要职责有:
1)维持应用的state
2)提供getState()方法获取state
3)提供dispatch(action)方法更新state
4)通过subscribe(listener)注册监听器,subscribe(listener), 方法返回的函数可以注销监听器
创建一个store,可以使用createStore()方法,如:
import { createStore } from 'redux';
const store = createStore(fn);
(2) state
Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。
当前时刻的 State,可以通过store.getState()拿到。
import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();
(3) action
Redux通过action将数据传到 store 。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
action的结构只是一个普通的js对象。
export const saveList = payload => ({
type: actionTypes.SAVE_LIST,
payload,
})
这里需要注意的是:
1)一个action中应该包含有一个type,表示动作名称(在大型应用中,推荐采用常量并分离到一个单独的文件中,如actionTypes.js)
2)除了type外,action中的其他属性都是随意的,其他的属性称之为载荷(payload)
3)应该尽量减少在action中传递的数据
(4)reducer
Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
const reducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.SAVE_LIST:
case actionTypes.SAVE_PROJECTS:
return { ...state, ...action.payload }
default:
return state
}
}
export default reducer
Redux 提供了一个combineReducers方法,用于 Reducer 的拆分。你只要定义各个子 Reducer 函数,然后用这个方法,将它们合成一个大的 Reducer。
import { combineReducers } from 'redux';
const chatReducer = combineReducers({
chatLog,
statusMessage,
userName
})
export default todoApp;
(5) store.dispatch()
store.dispatch()是 View 发出 Action 的唯一方法。
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'SAVE_LIST',
payload: 'Learn Redux'
});
在store里,会直接通过store.dispatch()来调用dispatch()方法。不过多数情况下,我们会采用react-redux提供的connect()来帮助调用。此外,还有辅助函数bindActionCreators(),可以自动把多个action创建函数绑定到dispatch()方法上。
5.工作流程
首先,用户发出Action
store.dispatch(action);
然后,Store 自动调用 Reducer,并且传入两个参数:当前 State 和收到的 Action。 Reducer 会返回新的 State 。
let nextState = todoApp(previousState, action);
State 一旦有变化,Store 就会调用监听函数。
// 设置监听函数
store.subscribe(listener);
listener可以通过store.getState()得到当前状态。如果使用的是 React,这时可以触发重新渲染 View。