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

Question

I am trying to use Redux Toolkit in my new website and I have a problem using the createEntityAdapter.

I am fetching some data from my database but my state is never updated with the data fetched and I do not understand why.

My slice and fetch functions:

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;

The data fetch is working well and the state between the request and de fullfilled looks like working as it should be, but as you can see in the console, the transports state is never updated.

Redux Logger

I do not understand why is not working the setAll function from the transportsAdapter. The entities that are being retrieved have and id and the entity information, so it should work correctly but it does not.

I hope you can help me.

Thank you very much.

Answer 1

I was facing the same issue following along the Redux Essentials Tutorial .

I fixed it by specifying the parameters to the function setAll() and using the builder callback approach.

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);
        });
    },
});