我正在尝试让我的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>
  )
 

}