Redux

Redux

什么是是Redux？

1. redux是专门用来做状态管理的JS库，
2. 在各大框架中都可以使用，跟react并没有什么直接关系

为什么需要Redux?

在组件化开发中，我们经常会设计组件间的通信，譬如父子（props）祖孙（context）；但如果许多个组件都需要该状态，那我们就需要一个集中的地方来管理这些状态

Redux 原理图

React Component 告诉Action Creator 我要做什么，然后Action Creator会创建一个事件，并且传给store，store再让reducer去处理这个事情。

接下来通过一个例子来详解redux的工作流程

// 首先要创建一个 reducer 来为store服务
const initState = 0
function countReducer(pre=initState,action){  // pre 是之前的状态，action是传入要做的动作
    const {type,data} = action   // 解构获得action
  switch (type){
    case INCREMENT:             // 定义了一个INCREMENT事件
      return  preState + data
    case DECREMENT:            // 定义了一个DECREMENT事件   注：这里大写是在另一个文件里定义好了的一个常量
      return  preState - data
    default:   // 初始化           初始化时，store会帮我们调用一次reducer，就进行了初始化，这时候action是{}，所以会来到 default 这里，对数据进行初始化，一般我们在函数传参赋给pre默认值
      return preState
  
}
// 在该 reducer 里定义好可以传的事情
// 创建该状态的store
const countStore = createStore(countReducer) // countReducer 就是我们刚刚写好的 reducer

store.getState() // 返回目前的值
store.dispatch() // 传一个对象过去，然后进行修改,一般我们将可以进行的操作封装到一个单独的文件里
     
// 如果想给 dispatch 传一个函数，需要在store里添加 applyMiddleware(thunk) thunk需要引入
  
那怎么在修改了数据后，及时更改视图层呢？
store.subscribe()  // 当该数值修改的时候，调用该函数，直接重新 render ，一般重新渲染该组件，因为diff的存在，开销也不会大

React-redux

react官方出的插件库

react 希望可以把 redux 和 react ui组件分开，UI组件只负责展现数据，容器组件只负责数据和业务

react-redux：

1. 提供Provider API，在index用 标签包裹 就可以给所以组件共享store

2. connect 将UI组件和容器组件合成

   connect(mapStateToProps,mapDispatchToProps)(UI_NAME)
   // mapStateToProps 将 redux 里的数据传给子组件
   	state => ({personList:state.person}) // 子组件里 props.personList 可以访问到
   // mapDispatchToProps 将 redux 里的方法，传给子组件来调用
   // 可以传一个数组过去
   {
     addPerson:addPersonAction  // 子组件里 props.addPerson 调用   
     												// addPersonAction 是定义在 action 中的一个方法
   }
   

3. 多个reducer合成

   // store 文件里
   // 在 redux 库中 引入 combineReducers 方法
   
   const allReducer = combineReducers({
     count:countReducer,  // 将store改成一个对象形式的东西，通过键值对来得到对应的值
     person:personReducer
   })
   将store改成一个对象形式的东西，通过键值对来得到对应的值
     person:personReducer
   })