我正在尝试让我的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>
)
}
1条答案
按热度按时间7gyucuyw1#
在_app.js文件中:
我把大括号从这一行去掉了:
即
import store from '../store.js';
这解决了我的问题。