Question

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

＃供应商切片

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

＃供应商

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

当我打电话给它时，它将供应商列表替换为从表单传递的新数据它会改变状态，这是不希望的

Answer 1

您需要从[saveSupplier.fulfilled]:(state,action)=>state.push中删除extraReducers。您现在正在尝试将值设置为一个函数，这就是为什么在此代码中您还会在控制台中看到不可序列化的错误的原因。如果只想将其保留为占位符，而不更新任何内容，请执行[saveSupplier.fulfilled]: (state, action) => {}。无论哪种方式，我都想您真正想要的是[saveSupplier.fulfilled]: suppliersAdapter.addOne在那儿？

Redux工具箱中的变异状态

1 个答案: