神农架网站建设公司,南阳网站建设多少钱,文字生成图片,.net网站模板在 Next 14 的 appRouter 模式中接入 React-Redux
说明
Next.js 版本升级到 14 后#xff0c;相比 13 版本是一个改动很大的大版本升级#xff0c;很多概念或者使用方式 13 版本都有较大的区别#xff0c;因此这里记录一些学习 14 版本的 Next.js 的心得体会或者问题。因为…在 Next 14 的 appRouter 模式中接入 React-Redux
说明
Next.js 版本升级到 14 后相比 13 版本是一个改动很大的大版本升级很多概念或者使用方式 13 版本都有较大的区别因此这里记录一些学习 14 版本的 Next.js 的心得体会或者问题。因为我这边构建项目选择的是 Next.js 新的路由模式 App Router因此该文档是基于 App Router 路由模式的。
安装依赖
根据 react-redux 官方文档 的说明使用如下面命令安装依赖
pnpm add reduxjs/toolkit react-redux创建 store 模块
我们以创建一个 counterSlice 举例 在项目根目录或者 app 目录或者其他目录创建 store 目录以及 react-redux 的主文件 store.ts然后创建 /storemodules/counterSlice.ts并写入如下代码
//counterSlice.jsxuse client; //this is a client side componentimport { createSlice } from reduxjs/toolkit;
import { RootState } from ../store;const initialState {value: 0,
};export const counterSlice createSlice({name: counter,initialState,reducers: {increment: (state) {state.value 1;},decrement: (state) {state.value - 1;},incrementByAmount: (state, action) {state.value action.payload;},},
});export const { increment, decrement, incrementByAmount } counterSlice.actions;export default counterSlice.reducer;export const selectCounter (state: RootState) state.counter.value;**注意**这里需要注意在 next 中redux 需要作为客户端渲染的模块因此 store 模块的文件头部都需要加上使用客户端渲染的注解 use client;。 然后在 store.ts 里面写入如下代码
//store.jsxuse client;
import { combineReducers, configureStore } from reduxjs/toolkit;
import counterReducer from ./modules/counterSlice;
import { Provider } from react-redux;const rootReducer combineReducers({counter: counterReducer,//add all your reducers here
});export const store configureStore({reducer: rootReducer,
});export function ReduxProvider({ children }) {return Provider store{store}{children}/Provider;
}export type RootState ReturnTypetypeof store.getState;export type AppDispatch typeof store.dispatch;将 ReduxProvider作为组件抛出去。
使用定义好的 store 模块
注册 Provider
我们可以在全局 layout 里面注册 Provider 这样能保证我们的所有的客户端组件都能使用 Redux:
import type { Metadata } from next;
import { Inter } from next/font/google;
import ThemeRegistry from /app/components/themeRegistry/ThemeRegistry;
import HeaderBar from /app/components/layout/HeaderBar;
import { ReduxProvider } from /app/store/store;
import { useEffect } from react;const inter Inter({ subsets: [latin] });export const metadata: Metadata {title: Create Next App11,description: Generated by create next app,
};function RootLayout({ children }: { children: React.ReactNode }) {return (html langenbody className{inter.className}ReduxProviderThemeRegistryHeaderBar /{children}/ThemeRegistry/ReduxProvider/body/html);
}// export default wrapper.withRedux(RootLayout);
export default RootLayout;组件中使用 redux
之前已经说了redux 在 next.js 中只能是作为客户端渲染模块使用所以我们不能再任何的 page.tsx 路由页面组件中使用除非这个路由页面有客户端渲染组件注解use client;然而这种情况可能并不多见。因此对于需要使用 redux 的地方我们需要这块儿逻辑封装成客户端渲染的组件比如
use client;
import {decrement,increment,selectCounter,
} from /app/store/modules/counterSlice;
import { AppDispatch } from /app/store/store;
import { Box, Button, Typography } from mui/material;
import { useDispatch, useSelector } from react-redux;export default function CounterControl() {const counter useSelector(selectCounter);const dispatch useDispatchAppDispatch();const handleChangeCounter (type: ADD | MINUS) {dispatch(type ADD ? increment() : decrement());};return (BoxTypography varianth1{counter}/TypographyBoxButton variantoutlined onClick{() handleChangeCounter(ADD)}ADD/ButtonButtonvariantoutlinedonClick{() handleChangeCounter(MINUS)}sx{{ ml: 2 }}MINUS/Button/Box/Box);
}这样子我们就可以在任意组件包括路由组件 page.tsx里面使用封装的这个 CounterControl 组件了
import { Metadata } from next;
import { Button } from mui/material;
import NavigateButton from /app/components/tools/NavigateButton;
import CounterControl from ../components/counter/CounterControl;export const metadata: Metadata {title: Users page,description: Generated by create next app,
};export default function UsersPage() {return (divCounterControl /Button sx{{ mx: 1 }} variantcontainedHellow Mui/ButtonNavigateButton destination/ variantcontained sx{{ mx: 2 }}back/NavigateButtonh2This is the User Index page/h2/div);
}以上就完成了在 Next.js 14 的 App Router 路由模式中接入 react-redux 的全过程。
