Redux的实现原理

Redux是将所有的状态进行集中管理，当需要更新状态的时候，仅需要要对在管理集中处理，而不用关心状态是如何分发的每一个组件内部的

       Redux就是一个实现集中管理的容器，遵循三大基本原则：

              单一数据源

              State是只读的

              使用纯函数来执行修改

工作原理：

              Redux要求我们吧数据放在store公共存储空间

              一个组件改变了store里面的数据内容，其它组件都能感知到store的变化，再来取数据，从而间接的实现了这些数据传递的功能

Redux的执行流程如下：

        

        1. 创建Store：首先，需要通过Redux的`createStore`函数来创建一个Store对象。这个函数接受一个reducer作为参数，用于处理不同的action。

        2. 定义Reducer：Reducer是一个纯函数，用于根据当前的state和action来计算新的state。它接受两个参数：当前的state和action，然后返回一个新的state。

        3. 分发Action：通过调用Store对象的`dispatch`方法来分发一个action。action是一个普通的JavaScript对象，它必须包含一个`type`属性，用于指定要执行的操作类型。

        4. 调用Reducer：当一个action被分发后，Redux会自动调用reducer函数，并将当前的state和action传递给它。Reducer根据action的类型来执行相应的操作，并返回一个新的state。

        5. 更新State：Redux会将Reducer返回的新的state保存起来，成为新的当前state。

        6. 通知订阅者：当state发生变化时，Redux会通知所有的订阅者，让它们可以获取到最新的state并进行相应的操作。

        7. 监听State变化：可以通过调用Store对象的`subscribe`方法来注册一个监听函数，以便在state发生变化时得到通知。

        通过这个执行流程，Redux实现了状态的管理和更新。每当需要更新状态时，只需要分发一个action，然后通过Reducer计算得到新的state，最后通知订阅者进行相应的操作。这种单向数据流的设计模式使得状态管理更加可控和可预测

手写redux原理:

let createStore =(reducer)=>{
    let state
    //存放所有的监听函数
    let listeners =[]
    let getState=()=>state
    //提供一个方法供外部调用派发action
    let dispatch =(action)=>{
        //调用管理员reducer得到新的state
        state = reducer(state,action);
        //执行所有的监听函数
        listeners.forEach((l)=>l())
    }
    //订阅状态变化事件,当状态改变发生之后执行监听函数
    let subScribe = (listener)=>{
        listeners.push(listener);
    }
    dispatch({type:'init'})
    return{
        getState,
        dispatch,
        subScribe,
    }

}

export default createStore

import createStore from ".././index";//引入创建的store


const countReducer = function(state=100,action){
    //判断类型 执行指定的操作
    switch (action.type) {
        case 'ADD':
            state =  state + 1
            return state
        case 'CUST':
            state =  state - 1
            return state 
        default:
            return state
    }
}

const store = createStore(countReducer) 

export default store //进行暴露

import React  from 'react'
import store from '../store/cart' //引入store
export default function Index3() {
    const add=()=>{
        store.dispatch({type:'ADD',state:'传递值'})
    }
  return (
    <div>
      {/* store.getState用来获取reducer中state的数据 */}
      {store.getState()} 
      <button onClick={add}>添加</button>
    </div>
  )
}