React中reducer的拆分,react redux hooks及redux-thunk中间件使用

最新推荐文章于 2024-05-17 09:41:54 发布

ProbeGene

最新推荐文章于 2024-05-17 09:41:54 发布

阅读量560

点赞数 1

本文链接：https://blog.csdn.net/yangyang_A/article/details/107838184

版权

文章目录

react中 reducer的拆分,react redux hooks

combineReducers 官网的介绍

combineReducers(reducers)

复杂数据下 reducer 的拆分,案例代码如下:

import {
    combineReducers} from "redux";
/*
    原始: reducer
    function reducer(state={
        list: {
            tab: "all",
            page: 1,
            data: []
        },
        article: {
            detail: {},
            message:[]
        }
    },action){
        switch(action.type){

        }
        return state;
    }
*/
// 拆分

// 负责处理 list 的数据
function listReducer(list={
     
    tab: "all",
    page: 1,
    data: []
},action){
    
    switch(action.type){
    
        case "LIST_ADD":
            let {
    data} = list;
            data.push("a");
            return {
    
                ...list,
                data
            }
    }
    return list;
}

// 负责处理 article 的数据
function article(article={
     
    detail: {
    },
    message:[]
},action){
    
    switch(action.type){
    
        case "ARTICLE_ADD":
            let {
    messa