Redux 单向数据流

redux https://redux.js.org

手写实现 redux，react-redux

• connected-react-router完整类库
• redux-logger
• redux-promise

redux-thunk,redux-saga,redux-acions,reselect，redux-persist等经典redux中间类库
乐观更新，前端先赋值，后显示请求

dux核心概念
action，dispatch，connect，reducer，store；
useStore，Provider，Context

1. store的连接与订阅
   1. 一个独立的 store，解决数据共享问题
2. action
3. reducers
4. react-redux
5. redux-thunk

6. 自定义redux中间件

7. 集中式管理 react 应用中多个组件共享的状态和从后台获取的数据

8. React-Redux 简化 redux
9. Redux-thunk 实现 redux异步编程
10. Redux-DevTools 实现 chrome中 redux调试
11. 业务数据全部放在 redux 中管理
    redux单向数据流
12. Redux = reducer + flux
13. Redux 所有数据都在 store中
14. 纯函数指的是：给定固定的输入，就一定会有固定的输出，而且不会有任何副作用
15. 中间件一定是 Redux的中间件，不是 react的中间件
    a. redux-devtools 也是 redux 的中间件
    b. 中间件：谁和谁的中间 action 和 store 中间
    Components 组件
    action 我要借书
    store.dispatch
    actionTypes 的拆分
    actionCreator 统一创建 action
    Store 图书管理员

Reduces 书籍的记事本
借的书
要换的书

使用 redux-thunk action 可以是个函数
中间件就是对 dispatch方法的封装和升级
最原始的 dispath 只接收对象，然后传递给 store
action 传递个 dispath 对象，直接传递给store
如果是 函数，先把函数执行结束
如果 action 传递的是函数，先让函数执行
根据参数的额不同，执行不同的事情
thunk 异步操作放到 action 里面操作
redux-saga 拆分 action 到一个单独的文件
redux中间件
redux
redux-thunk
redux-saga
react-redux
redux-log 记录日志
redux-thunk
redux-saga

1. 抽离 action异步请求到一个单独的文件，进行管理
   redux-promise
   redux-logger
   react-redux
2. connect 做链接，TodoList 链接 Store
   a. 怎么做链接，有个映射关系
3. export default connect()(TodoList)
   export default connect(mapStateToProps, mapActionToprops)(TodoList)

redux的好处

redux解决了：component -> action -> reducer -> state 的单向数据流转问题
扩展性：可以通过 middleware中间件 定制 action 的处理

redux缺点

需要维护一个庞大的状态树
redux的复杂化
redux store 的创建，中间件的配置，路由的初始化，Provider 的 store 的绑定，saga 的初始化
还要处理 reducer, component, saga 的 HMR

connect

connect连接，就是 store的订阅和推送

import store from '@/store'
class App extends React.Component {
  constructor(){
    super(props)
    const storeState = store.getState()
    this.state = {
      lang: storeState.lang,
      langList: storeState.langList
    }
    store.subscribe(() => {
      const storeState = store.getState()
      this.setState({lang: storeState.lang})
    })
  }
}