redux 工具包中的变异状态答案

【问题标题】：mutating state in redux toolkitredux 工具包中的变异状态
【发布时间】：2020-11-17 01:06:14
【问题描述】：

我的 reducer 改变了我不想要的状态，请帮忙

#Supplier Slice

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

export const getSupplierData = createAsyncThunk(
    'supplier/getSupplierData', async () => {
        const response = axios.get(
        "http://127.0.0.1:8000/supplier/"
        );
        const data = await (await response).data
        return data
    })

const suppliersAdapter = createEntityAdapter({})


export const { selectAll: selectSuppliers, selectById: selectSupplierById} = suppliersAdapter.getSelectors(
    state => state.suppliers
)
export const saveSupplier = createAsyncThunk('supplier/saveSupplier',
    async supplier => {
        const response = await axios.post('http://127.0.0.1:8000/supplier/', supplier)
        const data = await response.data
        return data
    }
)


export const suppliersSlice = createSlice({
    name: 'suppliers',
    initialState:suppliersAdapter.getInitialState({}),
    reducers: {
        newSupplier:(state,action)=>action.payload
    },
    extraReducers: {
        [getSupplierData.fulfilled]: suppliersAdapter.setAll,
        [saveSupplier.fulfilled]:(state,action)=>state.push
    }
})

export const { newSupplier } = suppliersSlice.actions

export default suppliersSlice.reducer

#supplier

const onSubmit=data=>dispatch(saveSupplier(data))

当我调用它时，它用从表单传递的新数据替换了供应商列表它改变了状态，这是不可取的

【问题讨论】：

标签： reactjs redux react-redux redux-toolkit

【解决方案1】：

您需要从您的extraReducers 中删除[saveSupplier.fulfilled]:(state,action)=>state.push。您现在正在做的是尝试将值设置为函数，这就是为什么您还会在控制台中看到带有此代码的不可序列化错误。如果您只想将其保留为占位符而不更新任何内容，只需执行[saveSupplier.fulfilled]: (state, action) => {}。不管怎样，我想你真正想要的是[saveSupplier.fulfilled]: suppliersAdapter.addOne吗？

【讨论】：