来自CreateEntityAdapter的SetAll不使用react redux工具包设置状态

Question

我正尝试在我的新网站中使用Redux Toolkit，但我在使用createEntityAdapter时遇到了问题。

我正在从我的数据库中获取一些数据，但是我的状态永远不会随着获取的数据而更新，我不知道为什么。

我的slice和fetch函数：

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之间的状态看起来像是正常工作，但正如您在控制台中看到的，传输状态永远不会更新。

Redux Logger

我不明白为什么不能从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);
        });
    },
});