Redux：组合减速器

Question

我正在关注 Redux 站点上的 Redux 教程，但我在使用 combine reducer 时遇到了困难。如果我运行我的代码没有组合减速器，它工作正常。一旦我将单个减速器放入组合减速器功能中。我得到这个：错误：“reducer”是必需的参数，并且必须是可以传递给 combineReducers 的函数或函数对象。我做错了什么？

这是使用 combine reducers 之前的存储：

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;

以上代码有效并从端点获取数据。

这里是修改为使用组合减速器的商店：

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

您必须将配置对象中的组合 reducer 传递给 configureStore 方法

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

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

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

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

并且由于键和值相同，您可以简单地使用

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

export const store = configureStore({reducer});

Redux：组合减速器

Redux: Combining reducers

reactjs

redux

react-redux

redux-toolkit