Redux结构有没有想过自己实现一个Redux？其实并不难。Redux主要由store、reducer、action组成。接下来，我们将尝试逐步构建Redux。Redux对reducer的一步步实现根据上图的介绍，我们知道reducer是根据传入的类型，对相关的state进行处理，然后返回一个新的state。从这里我们得到以下代码：//reducer.jsconstinit={num:0}exportconstreducer=(state=init,action)=>{switch(action.type){case'add':return{...state,num:state.num+1}case'low':return{...state,num:state.num-1}default:returninit}}store我们实现了上图中的第一步，是商店。.js文件。我们首先要明确store文件主要有三个重要的功能，分别是subscribe、dispatch、getState。接下来直接贴代码分析一下。//store.jsimport{reducer}from'./reducer.js'exportconstcreateStore=()=>{letcurrentState={}letcollect=[]dispatch({})functiongetState(){returncurrentState}functiondispatch(action){currentState=reducer(currentState,action)collect.forEach(tempFunc=>tempFunc())}functionsubscribe(tempFunc){if(fninstanceofFunction){collect.push(tempFunc)}return}return{getState,dispatch,subscribe}}我们可以看到createStore函数中除了三个基本函数外还有一行dispatch({})。这其实就是初始化redux。如果reducer中的初始化没有被触发，如果对相关的值进行加减操作都会得到NaN值。那么订阅函数主要是按照观察者模式来实现的。当用户在页面上订阅了subscribe函数，然后执行dispatch操作后，会触发当前页面的所有subscribe函数。这么说很麻烦，还是上代码吧。//index.jsimportReactfrom'react'import{createStore}from'../../store/store'import{reducer}from'../../store/reducer'conststore=createStore(reducer)exportclassRollextendsReact.Component{constructor(props){super(props)this.state={num:0}}componentWillMount(){store.subscribe(()=>this.setState({num:store.getState().nu??m}))}lowNum(){store.dispatch({type:'low'})console.log('store里面的价值'+store.getState().num)}addNum(){store.dispatch({type:'add'})console.log('store里面的价值'+store.getState().num)}render(){return(
