DoG*_*TeR 6 reactjs next.js 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"
}
},
再次感谢！！
DoG*_*TeR 18
我发现它是兼容的，但它需要不同的方法，如下所示......
布局.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;
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;
页面.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"
}
我希望这对任何寻找此信息的人有用。
| 归档时间： |
|
| 查看次数： |
4583 次 |
| 最近记录： |