Redux-toolkit：Store 没有有效的 reducer

Question

我完全迷失了 redux 和 next.js。经过许多令人沮丧的时间后，我似乎无法弄清楚如何简单地将两者联系起来。我的站点 returns 出现错误“类型错误：无法读取未定义的属性 'getState'”。由于某种原因，该商店似乎没有有效的减速器。

以下是似乎有问题的代码。 _app.js

import "../styles/globals.css";
import { SessionProvider } from "next-auth/react";
import store from "../store";
import { Provider as ReduxProvider } from "react-redux";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <ReduxProvider store={store}>
      <SessionProvider session={session}>
        <Component {...pageProps} />
      </SessionProvider>
    </ReduxProvider>
  );
}

export default MyApp;

store.js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./slices/counterSlice";

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

counterSlice.js

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

const initialState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },

    decrement: (state) => {
      state.value -= 1;
    },

    incrementByAmount: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

我要找的只是不会损坏的网站。我只想玩转全局状态，将一个变量从 true 更改为 false，反之亦然。

Answer 1

您的 store 是 undefined 因为它没有正确导入。现在它从 store.js 作为 named export（不是 default）导出，所以在导入过程中你需要记住使用大括号：

_app.js:

// don't forget the curly braces around `store`
import { store } from "../store";

或者，如果您打算导入 default（因此您可以使用 store 以外的名称），请记住指定 store 模块的 default导出：

store.js:

const store = configureStore({
  reducer: { counter: counterReducer },
});

// `store` can be named something else during import (and no curly braces needed)
export default store;

Redux-toolkit：Store 没有有效的 reducer

Redux-toolkit: Store does not have a valid reducer

reactjs

redux

next.js

redux-toolkit