Redux:组合reducers

Question

我正在遵循Redux网站上的Redux教程，但我在使用联合减速器时遇到了困难。如果我不使用组合缩减器来运行我的代码，它会工作得很好。只要我把单个减速器放入组合减速器的功能中。我得到了这个:错误："reducer“是一个必需的参数，并且必须是一个函数或可以传递给combineReducers的函数的对象。我做错了什么？

以下是使用联合减速器之前的存储：

import { configureStore } from "@reduxjs/toolkit";
import CoinsAllReducer from "./slices/CoinsAll";
export const store = configureStore({
reducer: {
   coinsAll: CoinsAllReducer,
  },
});

这是切片：

import axios from "axios";
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

const initialState = {
  coinsAll: [],
  status: "idle",
  error: null,
};

export const fetchAllCoins = createAsyncThunk(
  "coinsAll/fetchAllCoins",
  async () => {
    const res = await axios.get(
      `https://api.coingecko.com/api/v3/coins/markets/?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false`
    );
    return res.data;
  }
);

export const coinsAll = createSlice({
  name: "coinsAll",
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder
      .addCase(fetchAllCoins.pending, (state) => {
        state.status = "loading";
      })
      .addCase(fetchAllCoins.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.coinsAll = action.payload;
      })
      .addCase(fetchAllCoins.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.error.message;
      });
  },
});

export const selectCoinsAll = (state) => state.coinsAll.coinsAll;
export const selectStatus = (state) => state.coinsAll.status;
export default coinsAll.reducer;

上面的代码工作，并从端点获取数据。

以下是修改为使用组合reducer的存储：

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./rootReducer";

export const store = configureStore(reducer);

下面是rootReducer：

import { combineReducers } from "redux";
import coinsAllReducer from "./slices/coinsAll";

const reducer = combineReducers({
  coinsAll: coinsAllReducer,
});

export default reducer;

我没有改变切片中的任何东西。任何帮助都会很感谢，谢谢。

Answer 1

configureStore接受一个带有reducer键的对象。

它应该是

export const store = configureStore({
  reducer, // <-- object shorthand for the imported root reducer
  // other configurations, etc...
});

Answer 2

您必须将configuration对象内部的组合reducer传递给configureStore方法

export const store = configureStore({
  reducer:combinedReducer
});

因此，更新后的代码应该是

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./rootReducer";

export const store = configureStore({reducer:reducer});

由于key和value是相同的，所以您可以简单地使用

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./rootReducer";

export const store = configureStore({reducer});