2020.5.17 星期日 11：45

总结

import { createStore, combineReducers, connect } from ‘redux’

let store = createStore(todoApp)
// 初始状态
store.getState()
// 发起一系列 action
store.dispatch(addTodo(‘Learn about actions’))

SMTC

// action 
export const setVisibilityFilter = filter => {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter
  }
}
// Reducers  // import { combineReducers } from 'redux'  
const visibilityFilter = (state = 'SHOW_ALL', action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}
// containers
const mapStateToProps = state => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}
const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList) // components

文档

自述

Redux 由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。不管你有没有使用过它们，只需几分钟就能上手 Redux。

介绍

动机
核心概念

三大原则

1) 单一数据源
2) State 是只读的
唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
3) 使用纯函数来执行修改
为了描述 action 如何改变 state tree ，你需要编写 reducers。

先前技术

生态系统

示例

基础

Action

Action 本质上是 JavaScript 普通对象。我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。
不同的是，Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。

Reducer

Store

数据流

搭配 React

Redux 和 React 之间没有关系。
安装 React-Redux
容器组件（Smart/Container Components）和展示组件（Dumb/Presentational Components）

1) connect()和mapStateToprops()
容器组件就是使用 store.subscribe() 从 Redux state 树中读取部分数据，并通过 props 来把这些数据提供给要渲染的组件。你可以手工来开发容器组件，但建议使用 React Redux 库的 connect() 方法来生成，这个方法做了性能优化来避免很多不必要的重复渲染。（这样你就不必为了性能而手动实现 React 性能优化建议中的 shouldComponentUpdate 方法。）

使用 connect() 前，需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中。例如，VisibleTodoList 需要计算传到 TodoList 中的 todos，所以定义了根据 state.visibilityFilter 来过滤 state.todos 的方法，并在 mapStateToProps 中使用。

2) Provider
传入 Store
所有容器组件都可以访问 Redux store，所以可以手动监听它。一种方式是把它以 props 的形式传入到所有容器组件中。但这太麻烦了，因为必须要用 store 把展示组件包裹一层，仅仅是因为恰好在组件树中渲染了一个容器组件。
建议的方式是使用指定的 React Redux 组件 <Provider> 来魔法般的让所有容器组件都可以访问 store，而不必显示地传递它。只需要在渲染根组件时使用即可。

示例：Todo List

##　高级
异步 Action
异步数据流
Middleware
搭配 React Router
示例：Reddit API
下一步

技巧

迁移到 Redux
使用对象展开运算符
减少样板代码
服务端渲染
编写测试
计算衍生数据
实现撤销重做
子应用隔离
组织 Reducer
Reducer 基础概念
Reducer 基础结构
Reducer 逻辑拆分
Reducer 重构示例
combineReducers 用法
combineReducers 进阶
State 范式化
管理范式化数据
Reducer 逻辑复用
不可变更新模式
初始化 State

常见问题

综合