Next and Redux

8 июля 2024 г.

Эта справочная статья подойдет для тех, что уже знает, как работает redux. В ней содержится только основная информация, как подключить redux в next.js

В проект необходимо установить:

react-redux

npm i @reduxjs/toolkit react-redux

next-redux-wrapper

npm i next-redux-wrapper

Документация: https://www.npmjs.com/package/next-redux-wrapper

react-redux

npm i react-redux

Документация: https://react-redux.js.org/

App Router

Документация

Создание слайса

Slice создаем в папке lib. В документации redux папка со slices названа features, вы можете назвать ее как хотите.

Импортируйте в файл createSlice из @reduxjs/toolkit. Если вы работаете с TypeSсcript, вам также понадобится тип PayloadAction. Структура слайса в next app router ничем не отличается от обычной. Прописываете initialState, actions и selectors, если необходимо.

typescript | userSlice.ts

1import { createSlice, PayloadAction } from "@reduxjs/toolkit";
2import { TUserDataResponse } from "@/types";
3
4type userState = {
5	userData: TUserDataResponse;
6};
7
8const initialState = {
9	userData: [],
10} as userState;
11
12export const user = createSlice({
13	name: "user",
14	initialState,
15	reducers: {
16		setUserData: (
17			state,
18			action: PayloadAction<TUserDataResponse>
19		) => {
20			state.userData = action.payload;
21		},
22	},
23	selectors: {
24		selectUserData: (state) => {
25			return state.userData;
26		},
27	},
28});
29
30export const {
31	setUserData
32} = user.actions;
33export const {
34	selectUserData,
35} = user.selectors;
36export default user.reducer;
37

Создание store

Файл store создаем в папке lib. Импортируем в него configureStore из reduxjs/toolkit и создаем store.

Также импортируем в него reducer из слайса.

В примере ниже mainApi - это api файл rtk query.

typescript | store.ts

1import { configureStore } from "@reduxjs/toolkit";
2import { mainApi } from "./mainApi"
3import userReducer from "./slices/userSlice"
4export const makeStore = () =>
5  configureStore({
6    reducer: {
7      [mainApi.reducerPath]: mainApi.reducer,
8      user: userReducer
9    },
10    middleware: (gDM) => gDM().concat(mainApi.middleware),
11  });
12
13export type AppStore = ReturnType<typeof makeStore>;
14export type RootState = ReturnType<AppStore["getState"]>;
15export type AppDispatch = AppStore["dispatch"];
16

Redux provider

В папке app создайте файл, можно назвать его StoreProvider. В него импортируем Provider из react-redux и makeStore, AppStore из файла store.ts.

typescript | StoreProvider.tsx

1"use client";
2import { useRef } from "react";
3import { Provider } from "react-redux";
4import { makeStore, AppStore } from "../lib/store";
5
6export default function StoreProvider({
7	children,
8}: {
9	children: React.ReactNode;
10}) {
11	const storeRef = useRef<AppStore>();
12	if (!storeRef.current) {
13		storeRef.current = makeStore();
14	}
15
16	return <Provider store={storeRef.current}>{children}</Provider>;
17}

Затем, также в папке app, импортируйте StoreProvider в файл layout.tsx и оберните в него компоненты.

typescript | layout.tsx

1import type { Metadata } from "next";
2import { Inter } from "next/font/google";
3import "./globals.css";
4import { headers } from "next/headers";
5import StoreProvider from "./StoreProvider";
6
7export const runtime = "nodejs";
8export const dynamic = "force-static";
9
10const inter = Inter({ subsets: ["latin"] });
11
12export const metadata: Metadata = {
13	title: """,
14	description: "",
15};
16
17export default function RootLayout({
18	children,
19}: Readonly<{
20	children: React.ReactNode;
21}>) {
22	return (
23		<html lang="en">
24			<body className={`${inter.className}`}>
25				<StoreProvider>
26					{children}
27				</StoreProvider>
28			</body>
29		</html>
30	);
31}
32

Теперь вы можете использовать ваш redux в компонентах. Он работает также как и в react.

Использование в компонентах

Actions

В ваш компонент импортируйте useDispatch из react-redux и функцию action слайса. В примере выше - это setUserData.

JavaScript

1import { useDispatch } from "react-redux";
2import { setUserData } from "@/lib/slices/userSlice";

Затем отправьте данные в redux store с помощью dispatch.

typescript

1const dispatch = useDispatch();
2
3<...>
4
5if (apiData) {
6	dispatch(setUserData(apiData));
7}

Selectors

Импортируйте useSelector из react-redux в ваш компонент. Также импортируйте функцию селекта из вашего слайса. в примере выше - это selectUserData.

typescript

1import { useSelector } from "react-redux";
2import { selectUserData } from "@/lib/slices/userSlice";

Затем внутри вашего компонента извлеките данные из redux strore c помощью useSelector. Внутрь круглых скобок передаем функцию селекта.

typescript

1
2const userData = useSelector(selectUserData);

Готово, теперь данные можно использовать.

Pages router

Написано 15 июля 2023

Создание слайса стэйта

Документация: https://redux-toolkit.js.org/api/createSlice

Создайте файл и назовите его по названию отрывка стэйта, который он будет представлять. В примере это searchSlice.ts.

В файле укажите initialState и сам slice.

typescript | searchSlice.ts

1import { createSlice } from "@reduxjs/toolkit";
2import { AppState } from "../store";
3import { HYDRATE } from "next-redux-wrapper";
4
5// Type for our state
6export interface SearchState {
7 searchState: string;
8}
9
10// Initial state
11const initialState: SearchState = {
12    searchState: "",
13};
14
15// Actual Slice
16export const searchSlice = createSlice({
17  name: "search",
18  initialState,
19  reducers: {
20    [HYDRATE]: (state, action) => {
21      return {
22        ...state,
23        ...action.payload,
24      };
25    },
26    // Action to set the authentication status
27    setSearchState: (state, action) => {
28      state.searchState = action.payload;
29    },
30  },
31
32});
33
34export const { setSearchState } = searchSlice.actions;
35
36export const selectSearchState = (state: AppState) => state.search.searchState;
37
38export default searchSlice.reducer;
39

HYDRATE - Это специальный reducer для next, который работает поверх существующего состояния, если оно есть.

Создание store

Импортируем slice в store.ts. При экспорте store оборачиваем его в createWrapper из next-redux-wrapper.

typescript | store.ts

1import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
2import { searchSlice } from "./slices/searchSlice";
3import { createWrapper } from "next-redux-wrapper";
4
5const makeStore = () =>
6  configureStore({
7    reducer: {
8      [searchSlice.name]: searchSlice.reducer,
9    },
10    devTools: true,
11  });
12
13export type AppStore = ReturnType<typeof makeStore>;
14export type AppState = ReturnType<AppStore["getState"]>;
15export type AppThunk<ReturnType = void> = ThunkAction<
16  ReturnType,
17  AppState,
18  unknown,
19  Action
20>;
21
22export const wrapper = createWrapper<AppStore>(makeStore);

Настройка _app.tsx

В файл _app.tsx импортируем wrapper из store.ts и Provider из react-redux.

Деструктурируем store и props из wrapper и передаем store через Provider.

typescript | _app.tsx

1import { Provider } from "react-redux";
2import { wrapper } from "../store/store";
3import "../styles/_global.scss";
4
5const MyApp = ({ categories, Component, ...rest }) => {
6	const { store, props } = wrapper.useWrappedStore(rest);
7	const { pageProps } = props;
8	return (
9		<Provider store={store}>
10			<Component {...pageProps} />
11		</Provider>
12	);
13};
14
15export default MyApp;

Использование в компонентах

Там, где необходимо установить стэйт используем useDispatch из react-redux и импортируем функцию action.
Там, где нужно использовать значение из стэйта, импортируем select function из слайса и useSelector из react-redux.

typescript

1import React, { useState } from "react";
2import { useDispatch } from "react-redux";
3import { selectSearchState } from "../store/slices/searchSlice";
4import { setSearchState } from "../store/slices/searchSlice";
5import { useSelector } from "react-redux";
6
7const HomePage = () => {
8	const dispatch = useDispatch();
9	const searchState = useSelector(selectSearchState);
10	const [value, setValue] = useState(searchState);
11
12	const onInputChange = (e) => {
13		setValue(e.target.value);
14		dispatch(setSearchState(e.target.value));
15	};
16
17	return (
18		<section className="section">
19			<h1>Next and Redux</h1>
20
21			<div className="">
22				<input
23					type="text"
24					className="input"
25					value={value}
26					onChange={onInputChange}
27					placeholder="Введите что-нибудь"
28				/>
29
30				<p>searchState: {searchState}</p>
31			</div>
32		</section>
33	);
34};
35
36export default HomePage;

Код на GitHub

Next and Redux

В проект необходимо установить:

App Router

Создание слайса

Создание store

Redux provider

Использование в компонентах

Actions

Selectors

Pages router

Создание слайса стэйта

Создание store

Настройка _app.tsx

Использование в компонентах

Другие посты