如何使用 Redux 建立商店答案

【问题标题】：How to set-up store with Redux如何使用 Redux 建立商店
【发布时间】：2021-06-05 04:13:33
【问题描述】：

我正在尝试让我的 redux 使用新的表单功能，现在当我尝试显示我的主页时收到此错误消息。 index.reducer 文件最初包含我用于身份验证的教程中的 auth 和 message reducer，之前工作正常，所以我没有包含它们的 reducer。

我是用 configureStore index.reducer 文件中的五个 reducer 以正确的方式解决这个问题，还是我必须放入一个 combineReducer 函数？

错误信息

Error: Expected the reducer to be a function.

index.reducer.js

export default configureStore({
    // combine the reducers
    reducer: {
        user: userReducer,
        fields: fieldsReducer,
        diveSchool: diveSchoolReducer,
        auth,
        message
    }
});

store.js

const middleware = [thunk];

const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(...middleware))
    +  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

user.reducer.js

import {createSlice} from "@reduxjs/toolkit";

export const userSlice = createSlice({
    name: 'user',
    initialState: {
        dives: [],
    },
    reducers: {
        // expects action creator to be called with a dive object
        addDive: (state, action) => {
            // append to the dives array
            state.dives.push(action.payload)
        },
        deleteDive: (state, action) => {
            // append to the dives array
            state.dives.push(action.payload)
        }
    }
})

export const { addDive } = userSlice.actions;
export const { deleteDive } = userSlice.actions;
export default userSlice.reducer;

fields.reducer.js

export const fieldsSlice = createSlice({
    name: 'diveLogFields',
    initialState: {
        current: [],
        region: [],
        diveType: [],
        visibility: [],
        diveSpot: [],
    },
    reducers: {},
    extraReducers: {
        // picks up the success action from the thunk
        // [requireData.fulfilled.type]: (state, action) => {
        //     // set the property based on the field property in the action
        //     state[action.payload.field], action.payload.items
        // }
    }
})

export default fieldsSlice.reducer;

【问题讨论】：

configureStore 返回商店，您正在尝试使用它创建商店。选择一个 - 来自 redux 的 createStore，或来自工具包的 configureStore
干杯，所以我收到的错误消息来自我放入 configureStore 的减速器？我需要在 configureStore 中使用 combineReducers 吗？
是的，需要使用combineReducers函数将多个reducer合并为一个
Inside configureStore from toolkit you don't need to use combineReducers - toolkit 会为你做这件事。错误，可能来自createStore，您使用工具包不需要。

标签： reactjs redux

【解决方案1】：

您正在使用@reduxjs/toolkit。当您调用configureStore 函数时，它会返回存储。您正试图将此商店作为减速器放入来自 redux 的 createStore 中。使用工具包时，您不应使用createStore。您已经从index.reducer.js 导出商店。将它传递给提供者，然后你就设置好了。

【讨论】：

【解决方案2】：

看来你使用了错误的方法来组合reducer。对于组合多个reducer，使用combineReducers函数。

export default combineReducers({
    // combine the reducers
    reducer: {
        user: userReducer,
        fields: fieldsReducer,
        diveSchool: diveSchoolReducer,
        auth,
        message
    }
});

【讨论】：