Reactjs 分离redux状态';用于获取和发布请求

Reactjs 分离redux状态';用于获取和发布请求,reactjs,redux,logic,redux-toolkit,Reactjs,Redux,Logic,Redux Toolkit,我使用Redux来管理应用程序中合作伙伴的状态,最近我尝试对数据进行规范化,并破坏了一切。该状态有一个状态,它响应我的API GET和POST请求。我发现这是不正确的:如果我的POST请求失败,它会将状态更改为“失败”,所有依赖此状态显示GET请求信息的组件将显示错误消息。这方面有最佳实践吗 //the initialPartner is an object: { name: "Partner1" } import { createSlice, creat

我使用Redux来管理应用程序中合作伙伴的状态,最近我尝试对数据进行规范化,并破坏了一切。该状态有一个
状态
,它响应我的API GET和POST请求。我发现这是不正确的:如果我的POST请求失败,它会将状态更改为“失败”,所有依赖此状态显示GET请求信息的组件将显示错误消息。这方面有最佳实践吗

//the initialPartner is an object: { name: "Partner1" }

import {
    createSlice, 
    createAsyncThunk,
    createEntityAdapter
} from '@reduxjs/toolkit'
import axios from 'axios'

import { ADD_PARTNER_CONFIG, SERVER } from '../../app/constants'

const partnerAdapter = createEntityAdapter();

const initialState = partnerAdapter.getInitialState({
    status: 'idle',
    error: null
});

export const fetchPartners = createAsyncThunk(
    'partners/fetchPartners',
    async () => {
        const response = await axios.get(`${SERVER}/rest/partners`)
        return response.data
    }
)

export const addNewPartner = createAsyncThunk(
    'partners/addNewPartner',
    async initialPartner => {
        const response = await axios(ADD_PARTNER_CONFIG, initialPartner)
        return response.data
    }
)

const partnerSlice = createSlice({
    name: 'partners',
    initialState,
    extraReducers:{
        [fetchPartners.pending]: (state, action) => {
            state.status = 'loading';
        },
        [fetchPartners.fulfilled]: (state, action) => {
            state.status = 'succeeded';
            partnerAdapter.upsertMany(state, action.payload);
        },
        [fetchPartners.rejected]: (state, action) => {
            state.status = 'failed';
            state.error = action.error.message;
        },
        [addNewPartner.fulfilled]: partnerAdapter.addOne,
        [addNewPartner.rejected]: (state, action) => {
            state.status = 'failed';
            state.error = action.error.message;
        }
    }
})

export default partnerSlice.reducer

export const { partnerAdded } = partnerSlice.actions


export const {
    selectAll: selectAllPartners,
    selectById: selectPartnerById,
    selectIds: selectPartnerIds
} = partnerAdapter.getSelectors(state => state.partners)

您希望每个实体都有一个状态,而不是整个切片都有一个状态。