Redux详解

rudux有三个核心理念，只有理解了它们才会理解的reudx

一、store 

         1.它是仓库对象，通过 createStore()创建；如：const store = createStore(reducer)             注意：createStore()接受的参数是reducer而不是 state数据

          2.三个函数

                  a.store.getState()  获取store中的state数据。

                   b.store.dispath()  修改store中的数据，store.dispath(action)传入一个新的action，重新触发reducer函数执行，并把新的action传到reducer的参数之中。

                   c.store.subscribe(()=>{})  订阅store，当store中的数据发生了变化，会自动执行回调函数。

二、action 

        1.它是一个普通的js对象 {type:"xxx",conten:xxxx}

        2.rudux中所有的数据变化必须通过派发action来更新

三、reducer

      1.它必须是一个纯函数

       2.它接受两个参数 

               a.store中当前保存的state

               b.本次更新的action

        3.返回值：作为state之后存储的state

        4.需要再reducer中编写修改state的逻辑代码

四、代码实践：

const initDate = {name:'zs',age:18}
const store = createStore( (state=initDate,action)=>{
  switch (action.type) {
    case "change_name":
      return { ...state, name: action.name };
    case "add_number":
      return { ...satisfies, counter: state.counter + action.num };
    default:
      return state;
  }
}} )


//组件开发中可以将store导出，组件中引入

//获取store中的数据
store.getState()
//修改store中的数据 dispath中传入的就是 action对象，它会重新触发reducer()执行，并把新的action传入
store.dispath({type："change_name",name:'lisi'})
//订阅store中的数据，当store中的数据发生改变的时候会自动触发store.subscribe(()=>{})函数
store.subscribe(() => {
  console.log("数据变化：", store.getState());
});