Redux 工具包 combineReducers 問題：Store 沒有有效的 reducer。 確保傳遞給 combineReducers 的參數是 object，其

Question

請告訴我我做錯了什么？ 配置商店.js：

import {configureStore, combineReducers} from "@reduxjs/toolkit";
import pokemonSearchSlice from "./slices/pokemonSearch";

const reducer = combineReducers({
pokemonSearch: pokemonSearchSlice
});

const store = configureStore({
reducer
});



export default store;

pokemonSearch.js

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



const pokemonSearchSlice = createSlice({
    name: "pokemonSearch",
    initialState: {
        searchInputValue: ""
    },
    reducers: {
setValue:(state, action)=>({...state, searchInputalue: action.payload})
    }
}) ;



export const {setValue} = pokemonSearchSlice.actions;

export default pokemonSearchSlice;

錯誤全文：redux.js:394 Store沒有有效的reducer。 確保傳遞給 combineReducers 的參數是一個 object，其值為 reducers。 此外，我無法從商店中獲取“searchInputValue”，控制台說：無法解構“（0，react_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector）（...）”的屬性“searchInputValue”，因為它是未定義的。 但我認為這是因為 combineReducers 錯誤。 有什么建議么？

Answer 1

你需要從切片中傳遞減速器，像這樣

const pokemonSearchSlice = createSlice({
  name: "pokemonSearch",
  initialState: {
    searchInputValue: ""
  },
  reducers: {
    setValue: (state, action) => ({ ...state, searchInputalue: action.payload })
  }
});

const { actions, reducer } = pokemonSearchSlice;
export const {setValue} = actions;
export default reducer

Answer 2

這里有幾個問題：

• configureStore會自動為您調用combineReducers ，因此您不想直接這樣做。
• configureStore的reducer object 需要減速器，但您正在傳遞一個切片。 （切片包含減速器，但切片本身不是減速器。）
• 您的setValue正在返回一個新的 object，但 RTK 使用 Immer，因此您應該改變傳遞給 function 的 state 並且不返回任何內容。

最后，您的代碼應如下所示：

// configureStore.sjs
import { configureStore } from "@reduxjs/toolkit";
import pokemonSearchSlice from "./slices/pokemonSearch";

const store = configureStore({
  reducer: {
    pokemon: pokemonSearchSlice,
  },
});

export default store;

// slices/pokemonSearch.js"
import { createSlice } from "@reduxjs/toolkit";

const pokemonSearchSlice = createSlice({
  name: "pokemonSearch",
  initialState: {
    searchInputValue: "",
  },
  reducers: {
    setValue: (state, action) => {
      state.searchInputValue = action.payload;
    },
  },
});

export const { setValue } = pokemonSearchSlice.actions;

export default pokemonSearchSlice.reducer;