Redux

reducer就是一个纯函数，接收旧的state和aacion 返回新的state

reducer不能做的操作：

1.修改传入的参数

2.执行有副作用的操作，如api请求

3.调用非纯函数 如Date.now()或Math.random()

redux

Redux是javaacript应用的状态容器 保证程序行为的一致性且容易测试

Redux只是个纯粹的状态管理器，默认只支持同步，实现异步任务 比如延迟，网络请求，需要中间件的支持，你如我们使用最简单的redux-thunk和redux-logger

ReduxPage.js

  import React,{Component} from "react"
  import store from "../store"
  export default class ReduxPage extends Component{
    componentDidMount(){
      this.unsubscribe=store.subscribe(()=>{
        this.forUpdate()//更新组件
      })
    }
    componentWillUnmount(){
      if(this.unsubscribe){
        this.subscribe()
      }
    }
    //同步的action
    add=()=>{
     store.dispatch()
    }
    //异步的action 需要使用中间件
    asyAdd=()=>{
      store.dispatch(()=>{
        setTimeout(()=>{
          store.dipatch({{type:"ADD"})
        },1000)
      })
    }
    render(){
      return(
       <div>
         <h3>
           ReduxPage
         </h3>
         <p>{store.getState()}<p/>
         <button onClick={this.add}>add</button>
       </div>
       
      )
    }
  }

建立store

index.js

import {createStore,applyMiddleware} from "redux"
import thunk from "redux-thunk"
import logger from "redux-logger"
function countReducer=(state=0,action){
  switch(action.type){
     case: "ADD":
      return state+1;
      case:"MINUS":
      return state-1;
      default: return state
   }
}
const store=createStore(countReducer,applyMiddleware(thunk,logger));

export default store;

createStore.js

export default function createStore(reducer,enhancer){
  if(enhancer){
  //加强dispatch
    enhancer(createStore)(reducer)
  }
  let currentState;
  let currentListeners=[]
  function getState(){
    return currentState;
    
  }
  function dispatch(action){
      currentState=reducer(currentState,action);
      currentListeners.forEach(listener=>listener());
  } 
  function subscribe(listener){
     currentListeners.push(listener)
     return ()=>{
       currentListeners=[]
     }
  }
  //初始值
  dispatch({})
  return{
    getState,
    dispatch,
    subscribe
  }


}

实现applyMiddleware

 export default function applyMiddleware(...middlewares){
    return createStore=>reduer=>{
      const store=createStore(reducer)
      let dispatch=store.dispatch
      
      //加强后的dispatch
      const midApi={
       getState:store.getState,
       dispatch:(action,...args)=>dispatch(action,...args)
      }
const middlewareChain=middlewareChain.map(middleware=>middleware(midApi))
       dispatch=compose(...middlewareChain)(store.dispatch)
       //加强dispatch
      return{
        ...store,
        //加强后的dispatch
        dispatch
      }
    }
 }

实现logger

  fucntion logger({getState}){
    return next=>action=>{
     let prevState=getState()
     const returnValue=next(action)
     let newState=getState()
     return returnValue()
    }
  }

实现thunk

function thunk({dispatch,getState){
   return next=>action=>{
     if(typeof action=='function'){
        return action(dispatch,getState);
      }
      return next(action)
   }
}