CreateEntityAdapter 中的 SetAll 不使用 react redux 工具包設置狀態

Question

我正在嘗試在我的新網站中使用 Redux Toolkit，但在使用 createEntityAdapter 時遇到了問題。

我正在從我的數據庫中獲取一些數據，但我的狀態從未隨獲取的數據更新，我不明白為什么。

我的切片和獲取功能：

export const getTransports = createAsyncThunk('marketplace/transports/getTransports', async email => {
    const response = await axios.get(`${API_URL}/transport/published/company/${email}/notActive`);
    console.log('response', response);
    const data = await response.data;
    console.log('DATA', data);
    return data;
});

const transportsAdapter = createEntityAdapter({});

export const { selectAll: selectTransports, selectById: selectTransportById } = transportsAdapter.getSelectors(
    state => state.marketplace.transports
);

const transportsSlice = createSlice({
    name: 'marketplace/transports',
    initialState: transportsAdapter.getInitialState({
        searchText: ''
    }),
    reducers: {
        setTransportsSearchText: {
            reducer: (state, action) => {
                state.searchText = action.payload;
            },
            prepare: event => ({ payload: event.target.value || '' })
        },
        extraReducers: {
            [getTransports.fulfilled]: transportsAdapter.setAll
        }
    }
});

export const { setTransportsSearchText } = transportsSlice.actions;

export default transportsSlice.reducer;

數據獲取運行良好，請求和 de fullfill 之間的狀態看起來像它應該的那樣工作，但正如您在控制台中看到的那樣，傳輸狀態永遠不會更新。

Redux 記錄器

我不明白為什么不能使用 transportsAdapter 的 setAll 函數。 正在檢索的實體具有 id 和實體信息，因此它應該可以正常工作，但事實並非如此。

我希望你能幫助我。

非常感謝。

Answer 1

在Redux Essentials Tutorial之后，我遇到了同樣的問題。

我通過為函數setAll()指定參數並使用構建器回調方法來修復它。

const transportsSlice = createSlice({
    name: 'marketplace/transports',
    initialState: transportsAdapter.getInitialState({
        searchText: ''
    }),
    reducers: {
        setTransportsSearchText: {
            reducer: (state, action) => {
                state.searchText = action.payload;
            },
            prepare: event => ({ payload: event.target.value || '' })
        },
        extraReducers: (builder) => {
            builder.addCase(getTransports.fulfilled, (state, action) => {
              transportsAdapter.setAll(state, action.payload);
        });
    },
});