next.js redux工具包是否与接下来的13个新应用程序/目录兼容？

我在使用redux-toolkit和新的应用目录时遇到了麻烦。有没有一种特殊的方法来实现这个提供程序，因为到目前为止我所尝试的一切都失败了。

以下过程可与现有页目录完美配合...

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { Provider } from "react-redux";
import { store } from "../store";
import Navbar from "./Navbar";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Navbar />
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

但是，新的根布局不接受该提供程序。

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head />
      <body>{children}</body>
    </html>
  );
}

如有任何建议，不胜感激。谢谢

我尝试了各种实现redux的方法...

import { Provider } from "react-redux";
import { store } from "../store";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Provider store={store}>
      <html>
        <head />
        <body>{children}</body>
      </html>
    </Provider>
  );
}

我当前的软件包是...

"packages": {
    "": {
      "dependencies": {
        "@reduxjs/toolkit": "^1.9.0",
        "color-rgba": "^2.4.0",
        "colornames": "^1.1.1",
        "next": "latest",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-redux": "^8.0.5"
      },
      "devDependencies": {
        "@types/colornames": "^1.1.2",
        "@types/node": "18.11.3",
        "@types/react": "18.0.21",
        "@types/react-dom": "18.0.6",
        "autoprefixer": "^10.4.12",
        "postcss": "^8.4.18",
        "tailwindcss": "^3.2.1",
        "typescript": "4.8.4"
      }
    },

再次感谢！

我发现它是兼容的，但需要一种不同的方法，如下所示...
布局.tsx

import "../styles/globals.css";
    import { Providers } from './provider';
    
    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode;
    }) {
      return (
        <html>
          <body>
            <Providers>
              {children}
            </Providers>
          </body>
        </html>
      );
    }

提供程序.js

'use client';
    
    import { Provider } from "react-redux";
    import { store } from "../store/store";
    
    export function Providers({ children }) {
      return (
        <Provider store={store}>
          {children}
        </Provider>
      );
    }

商店.ts

import { configureStore } from "@reduxjs/toolkit";
    import counterReducer from "../slices/counterSlice";
    
    export const store = configureStore({
      reducer: {
        counter: counterReducer,
      },
    });
    
    export type RootState = ReturnType<typeof store.getState>;
    export type AppDispatch = typeof store.dispatch;

计数器切片.ts

import { createSlice } from '@reduxjs/toolkit';
    import type { PayloadAction } from '@reduxjs/toolkit';
    
    export interface CounterState {
      value: number;
    }
    
    const initialState: CounterState = {
      value: 10,
    }
    
    const counterSlice = createSlice({
      name: 'counter',
      initialState,
      reducers: {
        increment: (state) => {
          state.value++;
        },
        decrement: (state) => {
          state.value--;
        },
        incrementByAmount: (state, action: PayloadAction<number>) => {
          state.value += action.payload;
        },
        decrementByAmount: (state, action: PayloadAction<number>) => {
          state.value -= action.payload;
        },
      }
    })
    
    export const { increment, decrement, incrementByAmount, decrementByAmount } = counterSlice.actions;
    export default counterSlice.reducer;

第.tsx页

'use client';
    import { useSelector, useDispatch } from "react-redux";
    import { decrement, increment, incrementByAmount, decrementByAmount } from "../slices/counterSlice";
    import type { RootState } from "../store/store";
    import { useState } from "react";
    
    function page() {
        
      const count = useSelector((state: RootState) => state.counter.value);
      const dispatch = useDispatch();
      const [amount, setAmount] = useState("10");
    
      return (
        <>
          <div className="flex justify-center pt-[20%] pb-10">
            <button 
              className="w-40 bg-red-500 rounded-full mr-5 border-2 border-black"
              onClick={() => dispatch(decrement())}>
              [-1] DECREMENT
            </button>
            <button 
              className="w-40 bg-green-500 rounded-full border-2 border-black" 
              onClick={() => dispatch(increment())}>
              [+1] INCREMENT
            </button>
          </div>
          <p className="text-center text-5xl font-bold">Count = {count}</p>
          <div className="flex justify-center space-x-5 pt-12">
            <button
              className="w-40 bg-blue-500 rounded-full border-2 border-black"
              onClick={() => dispatch(decrementByAmount(+amount))}>
              [-] AMOUNT
            </button>
            <input
              title="amount"
              className="w-30 bg-[darkseagreen] rounded-full text-center border-2 border-black"
              type="text"
              defaultValue={amount}
              onChange={(e) => {setAmount(e.target.value);}}
            />
            <button
              className="w-40 bg-[saddlebrown] rounded-full border-2 border-black"
              onClick={() => dispatch(incrementByAmount(+amount))}>
              [+] AMOUNT
            </button>
          </div>
        </> 
      )
    }
    
    export default page;

注意***“使用客户端”**是必须导入到使用状态的每个组件中的要求。

'use client';

本演示中使用了Tailwind CSS，但可能会因为没有样式而将其删除。
正在使用的依赖项...

"dependencies": {
        "@reduxjs/toolkit": "^1.9.0",
        "@types/node": "18.11.9",
        "@types/react": "18.0.25",
        "@types/react-dom": "18.0.9",
        "eslint": "8.28.0",
        "eslint-config-next": "13.0.4",
        "next": "13.0.4",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-redux": "^8.0.5",
        "typescript": "4.9.3"
      },
      "devDependencies": {
        "autoprefixer": "^10.4.13",
        "postcss": "^8.4.19",
        "tailwindcss": "^3.2.4"
      }

我希望这对任何寻找这些信息的人都有用。
git repository for the code above

npm安装
npm运行偏差

next.js redux工具包是否与接下来的13个新应用程序/目录兼容？

我在使用redux-toolkit和新的应用目录时遇到了麻烦。有没有一种特殊的方法来实现这个提供程序，因为到目前为止我所尝试的一切都失败了。

1条答案

相关问题

热门标签

最新问答