我在使用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"
}
},
再次感谢! !
我发现它是兼容的，但它需要不同的方法，如下所示…
layout.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>
);
}
provider.js
'use client';
import { Provider } from "react-redux";
import { store } from "../store/store";
export function Providers({ children }) {
return (
<Provider store={store}>
{children}
</Provider>
);
}
store.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;
counterSlice.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;
page.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;
注意"使用client"是必须导入到使用state的每个组件中的需求。
'use client';
顺风CSS在这个演示中被使用，但是如果没有样式，它可能会被删除。
i'm using…
"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存储库
- npm安装 npm run dev