<一起来学 Redux > --- 基础篇

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