redux模块拆分——start状态模块化——connect高阶函数模块化——Action函数返回对象模块化

redux模块拆分

使用redux库中提供的​​combineReducers​​方法，可以将多个拆分reducer函数合并成统一的reducer函数，返回一个新reducer，提供给createStore来使用。

import { combineReducers } from 'redux'
import admin from './reducer/admin'
import web from './reducer/web'

const reducer = combineReducers({
    numadd,
    web
})

如何去拆分

把数据状态源state和reducer拆分出去
路径：./count/numadd.js

const initState = {
    num:100
}

const reducer = (state=initState,action)=>{
    // console.log(action);
    if(action.type === "add"){
        return {...state,num:state.num+action.payload}
    }
    return state
}
export default

如何去合并

如果你进行了redux模块化拆分，则需要注意 type的类型名称不能重名，如果重名则都会执行

const reducer = combineReducers({
   key:value
   key：它是在获取state数据时的命名空间名称，redux中没有dispatch操作的命名空间名称
   type类型: 拆分后的文件名称为前缀 xxx_type类型名  不会重名
   value 拆分后的reducr纯函数 
})

例如：

import numadd from './count/numadd'
let reducer = combineReducers({
    numadd
})
****

如何去使用拆分后的模块呢1？

通过这个模块化拆分后发现，数据状态会分成了好几个对象，那个数据需要，就return哪个模块的key值，这样就可以在组件中通过this.props取值，而dispatch方法不会影响，注意type值不能取成一样的

const mapStateToProps = state => {
    console.log(state);//{numadd: {…}}
    console.log(state.numadd);//{num: 100}
    return state.numadd
//   return { num: state.num }
}

const mapDispatchToProps = dispatch =>{
    return {
        add(n=1){
            setTimeout(()=>{
                dispatch({type:"add",payload:n})
            },1000)
        }
    }
}
***********************************************

import { connect } from 'react-redux'
@connect(mapStateToProps, mapDispatchToProps)
class App extends Component {

    <h1>App组件{this.props.num}</h1>
        
    <button onClick={()=>{
        this.props.add(4)
    }}>rdeux操作++</button>
}

针对这种react-redux繁琐的在组件中书写，也可以进行拆分：

那其实我们发现；在前面部分只是一个固定的高阶函数
这样的话，还不如再次把这些固定的函数，以及所需要传入的对象给封装成一个文件，导出函数，在使用通过修饰符@来调用高阶组件。

模块化高阶函数

import { connect } from 'react-redux'
const mapStateToProps = state => {
    return state.numadd
}
const mapDispatchToProps = dispatch =>{
    return {
        add(n=1){
            dispatch({type:"add",payload:n}
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)

再次通过装饰器调用高阶函数：
从而达到封装的效果。

import conncet from './store/count/conncet';
@conncet
class App extends Component {}

对于在这的mapDispatchToProps返回值为对象，对象里面是key、value的函数，那这个函数其实我们如果对同一个状态的数据进行操作，不仅仅有一种方法，可能是多个，咱们就可以把它们专门提取出来作为一个函数，执行时返回一个对象。

export default (dispatch)=>({
    add(n=1){
        dispatch({type:"add",payload:n})
    }
})

这样写就可以添加多个函数返回值。

import countAction from './countAction.js';
const mapDispatchToProps = dispatch =>{
    return {
        ...countAction(dispatch)
    }
}

使用中间件完成对中间action的拦截和放行

利用applyMiddleware来完成中间件

import { createStore ,combineReducers,applyMiddleware} from "redux";

const logger = store =>next =>action =>{
    console.log("action___",action);
    next(action)
}


store = createStore(reducer,composeWithDevTools(applyMiddleware(logger)))

export default

或者利用redux的中间件

yarn add redux-logger

import logger from "redux-logger"

store = createStore(reducer,composeWithDevTools(applyMiddleware(logger)))