Redux是什么

Redux is a predictable state container for JavaScript apps. 官方说法

  1. Redux 是一个可预测的JS APP的状态容器,独立于React 以及其他框架或者库。
  2. Redux 是一个唯一的状态仓库,也就是在一个APP里面只能有一个
  3. 仓库里面的状态值只读
  4. 修改状态值只能通过Action来修改,由Action来告诉Redux 修改哪一个值以及怎么修改, 这个Action实际经常用用一个function来获得,由两个数据:不同类型的值 Action 需要指明不同的类型 以及 这个类型的值
    action
  5. 知道了怎么修改 ,也有需要有人来执行这个操作,这个人就是Reducer根据和action约定的不同的规则来做不同的修改
    reducer
  6. 已经知道了怎么做,那么到底怎么实施的呢?var store = Redux.createStore(favoriteColors);

用reducer作为一个初始化参数才创建仓库,以及有个入口方法来接收action

store.dispatch(addColor("blue"));
store.dispatch(addColor("yellow"));
store.dispatch(addColor("green"));
store.dispatch(addColor("red"));

怎么和React建立联系

Redux既然是独立于React的,那么要和React一起使用,必然需要一个”中间件”来沟通,这个”中间件” 就是redux-react 库。

Redux 本身有读取和写入状态库的操作,那么我们也要让React具有相同的能力

  1. Provider component 提供了让React读取Redux Store的能力
    provider
    那么Provider 是怎么实现让React各层可以访问redux store 的呢? 这个全靠React本身的能力Context, Context 提供了一种向整个component tree 传递props的方式,这种方式避免了每层都手动传递
  2. Redux修改Store的能力,是通过dispatch来接收action, 我们也要让React和这个能力做一个捆绑链接,这个需要 Connect Component 来实现