Redux Toolkit不支持我的Next.js应用:TypeError:无法读取undefined的属性(阅读'getState')

gpfsuwkq  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(116)

我正在尝试让我的Next.JS应用程序与Redux Toolkit一起工作。对于上下文,我想在我的应用程序中使用Redux Toolkit来实现购物车功能。购物车中的产品数量应该由一个全局状态管理,因此我使用Redux工具包。

下面是我的代码:

store.js

import {configureStore } from '@reduxjs/toolkit';
    import cartReducer from './slices/cart'

    export default configureStore({
     reducer: {
        cart: cartReducer
     }
})

cart.js

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  cart: 2,
}

export const counterSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    increment: (state) => {
      state.cart += 1
    },

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

    incrementByAmount: (state, action) => {
      state.cart += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

_app.js

import Layout from '@/components/Layout'
import '@/styles/globals.css'
import {useState} from 'react';
import {store } from '../store';
import { Provider } from 'react-redux';

export default function App({ Component, pageProps }) {

  return(

    <Provider store={store}>
    
        <Layout>

            <Component {...pageProps} />

        </Layout>

    </Provider>
  )
 

}
7gyucuyw

7gyucuyw1#

在_app.js文件中:

import Layout from '@/components/Layout'
import '@/styles/globals.css'

import {useState} from 'react';
import { store }  from '../store.js';
import { Provider } from 'react-redux';

export default function App({ Component, pageProps }) {

  return(

    <Provider store={store}>
    
        <Layout>

            <Component {...pageProps} />

        </Layout>

    </Provider>
  )

}

我把大括号从这一行去掉了:

import { store }  from '../store.js';


import store from '../store.js';
这解决了我的问题。

相关问题