React18项目中对redux高级封装

本章将讲解如何对上一章中提到的redux的基本使用做更高级的封装，封装成类似Vue全家桶中的VueX。

上一章redux的基本使用链接：https://mp.csdn.net/mp_blog/creation/editor/130368848

不明白的小伙伴可以点击链接去查看上一章节，再来学习本章如何封装

1. 下载插件redux-thunk

npm i redux-thunk

2. 改造CountState中的文件

// store/CountStatus/index.ts

const store = {
    state: {
        count: 12
    },
    //同步任务
    actions: {
        add1(newState:{count: number}){
            newState.count++
        },
        add2(newState: {count: number},action: {type: string,val: number}){
            newState.count += action.val
        }
    },
    //异步任务
    asyncActions: {
        asyncAdd1(dispatch:Function){
            setTimeout(() => {
               dispatch({type: 'add1'})
            },1000)
        }
    },
    actionsName:{}
}

// 自动添加actionsName,封装后的固定写法
let actionsName = {}
for(let key in store.actions){
    actionsName[key] = key
}

store.actionsName = actionsName

export default store

// store/ArrStatus/reducer.ts

import handleCount from './index';

let reducer = (state= {...handleCount.state}, action: {type: string, val: number}) => {
    let newState = JSON.parse(JSON.stringify(state))
    //将switch改造成for in 实现自动化
    for(let key in handleCount.actionsName){
        if(action.type === handleCount.actionsName[key]){
            handleCount.actions[handleCount.actionsName[key]](newState,action)
            break;
        }
    }

    return newState
}

export default reducer

3. 改造ArrStatus文件，与改造CountStatus类似

// store/ArrStatus/index.ts

const store = {
    state: {
        arr: [1,3,5,7,9]
    },
    actions: {
        arrpush(newState: {arr: number[]}, action: {type: string,val: number}){
            newState.arr.push(action.val)
        }
    },
    asyncActions: { },
    actionsName: { } 
}

// 自动添加actionsName
let actionsName = {}
for(let key in store.actions){
    actionsName[key] = key
}
store.actionsName = actionsName

export default store

// store/Arrstate/reducer.ts

import handleArr from './index'

let reducer = (state={...handleArr.state} , action: {type: string, val:number}) => {
    let newState = JSON.parse(JSON.stringify(state))

    for(let key in handleArr.actionsName){
        if(action.type === handleArr.actionsName[key]){
            handleArr.actions[handleArr.actionsName[key]](newState,action)
            break;
        }
    }

    return newState
}
export default reducer

4. 改造store/index.ts

import handleArr from './ArrState/reducer';
import handleCount from './CountState/reducer';
import reduxThunk from 'redux-thunk';
import { combineReducers, legacy_createStore, applyMiddleware } from 'redux';

const reducers = combineReducers({
    handleArr,
    handleCount
})

const store = legacy_createStore(reducers,applyMiddleware(reduxThunk))

export default store

经过上述封装，每个共享数据module都是固定写法，包含index.ts和reducer.ts。其中index.ts中state、actions、asyncActions相当于VueX中的state、mutations、actions， 分别用过数据源、同步任务、异步任务。reducer.ts已被自动化处理，每新建一个共享数据，在index.ts中添加数据源、同步/异步任务，再在reducer.ts中只需要改一下引入名称，其他不需要改动。最后在store/index.ts中引入新增module和配置reducers即可在页面中使用共享数据。

如果还嫌麻烦，亦可以进一步封装，把每个module下的index.ts和reducer.ts合并写在一个文件也是可以的，小伙伴们可以自行封装，难度较小，这里不在赘述。

相关视频讲解，可以去B站上观看：乐哥讲解的很详细，小编也是跟他学习如何封装的13.react-redux入门案例-connect讲解&ComA实现发送Action_哔哩哔哩_bilibili13.react-redux入门案例-connect讲解&ComA实现发送Action是redux全局状态管理学习路线之一 : redux&react-redux的第13集视频，该合集共计22集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV1oE411V7RW?p=13&spm_id_from=333.880.my_history.page.click