Reducer
- 提前设计好
state对象的结构 - 把state想象成数据库. 每个数据以 ID 为主键, 不同实体或列表间通过 ID 相互引用数据.
- 保证对Action处理的纯洁性, 不要做以下操作
- 修改传入参数
- 执行有副作用的操作, 如API请求和路由跳转
- 调用非纯函数,如
Date.new()
如果经常需要修改state,那么建议使用
Immutable-
合并对象
// 合并对象 Object.assign({},state, { visibilityFilter: action.filter }) // 对象展开运算符优化 { ...state, ...newState }
-
reducer合成
- 把state的构建分离成小函数, 组合多个小函数,合成为整个state
-
拆分成多个reducer后进行合并,redux提供了
combineReducers({})import { combineReducers } from 'redux' const todoApp = combineReducers({ visibilityFilter, todos }) export default todoApp // 含义就是 export default function todoApp(state = {}, action) { return { visibilityFilter: visibilityFilter(state.visibilityFilter, action), todos: todos(state.todos, action) } }
Store
// 每次 state 更新时，打印日志
// 注意 subscribe() 返回一个函数用来注销监听器javascript
const unsubscribe = store.subscribe(() =>
console.log(store.getState())
)
// 停止监听 state 更新
unsubscribe();
数据流
Redux 是 严格的单向数据流.
Redux 应用中数据的生命周期遵循下面4个步骤
- 调用
store.dispatch(action) -
store调用传入的reducer函数, 如API调用和路由跳转,这些应该在 dispatch 之前发生 - 根
reducer应该把多个子reducer输出合并成一个单一的state树, 利用combineReducer() -
store保存了根reducer返回的完整state树
搭配React
Redux和react之间没有关系, 他甚至可以和 纯 JS 进行搭配使用.
默认Redux是不包含React绑定库的需要独立安装
npm install --save react-redux
容器组件(smart)和展示(dumb)组件
- 函数式组件推荐, 除非需要本地state或生命周期函数的场景.
- 中间件: middleware
- redux-saga
- redux-thunk
- redux-promise
