redux中间件+react高阶组件

1.redux中间件

中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步action ，action 过滤，日志输出，异常报告等功能

redux-logger：提供日志输出,每次action修改state时，都会在控制台打印出关键信息，便于开发者追溯状态。

// src/store/index.tsx
import {createStore,applyMiddleware} from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
const reducer = function(state:any,actions:any){if(!state){return {count:10,msg:'hello redux'}}switch(actions.type){case "PLUS":return {...state,count:state.count+1}break;default:return statebreak}
}
const store =applyMiddleware(logger,thunk)(createStore)(reducer)
export default store
// 异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。

redux-thunk：处理异步操作

// src/store/index.tsx
import React, { useEffect, useState } from 'react';
import yayJpg from '../assets/yay.jpg';
import store from '../store/index'export default function HomePage() {const [user,setuser] = useState(store.getState().count)useEffect(()=>{store.subscribe(()=>{setuser(store.getState().count)})},[])// const upd = ()=>{//   store.dispatch({type:"PLUS"})// }const openFormAsync = () => {// 返回一个函数，参数是dispatch函数，函数里面包含异步操作，且一般要调用同步actionstore.dispatch((dispatch:any,getState:any)=>{setTimeout(() => {console.log(getState())dispatch({type:'PLUS'})},2000)})}return (<div><h2>{user}</h2><p><img src={yayJpg} width="388" /></p><p>To get started, edit <code>pages/index.tsx</code> and save to reload.<button onClick={openFormAsync}>修改</button></p></div>);
}

redux-promise：处理异步操作，actionCreator的返回值是promise

2.React高阶组件

高阶函数（Higher-order function），至少满足下列一个条件的函数

接受一个或多个函数作为输入,输出一个函数

在React中，高阶组件即接受一个或多个组件作为参数并且返回一个组件，本质也就是一个函数，并不是一个组件

高阶组件的主要功能是封装并分离组件的通用逻辑，让通用逻辑在组件间更好地被复用

高阶组件可以传递所有的props，但是不能传递ref

高阶组件能够提高代码的复用性和灵活性，在实际应用中，常常用于与核心业务无关但又在多个模块使用的功能，如权限控制、日志记录、数据校验、异常处理、统计上报等

import React from 'react'
const Gaojie = (Son: any) => {return function () {const arr = {one: '马新明',two: '小黑'}return <Son {...arr} />}
}const Gao = (props: any) => {// console.log(props,'props');return (<div>{props.one}</div>)
}const L=(props:any)=>{return(<div>{props.two}</div>)
}const Fourther=()=>{return(<><One/><T/></>)
}const One = Gaojie(Gao)
const T = Gaojie(L)
export default Fourther