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;

数据提取工作正常，请求和未满请求之间的状态看起来应该可以正常工作，但是正如您在控制台中看到的那样，传输状态永远不会更新。

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

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

1 个答案: