Home PostsNext and Redux

Next and Redux

This reference article is intended for those who already understand how Redux works. It contains only the essential information on how to integrate Redux into a Next.js application.

Required Packages

You need to install:

react-redux

npm i @reduxjs/toolkit react-redux

next-redux-wrapper

npm i next-redux-wrapper

Documentation: https://www.npmjs.com/package/next-redux-wrapper

react-redux

npm i react-redux

Documentation: https://react-redux.js.org/

App Router

Documentation

Creating a Slice

Create slices in a lib folder. In Redux documentation, this folder is often called features, but you can name it however you prefer.

Import createSlice from @reduxjs/toolkit. If you use TypeScript, you will also need PayloadAction.

The structure of a slice in the Next.js App Router is the same as in a standard Redux setup: define initialState, actions, and 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

Creating the Store

Create a store file inside the lib folder. Import configureStore from Redux Toolkit and create the store.

Also import reducers from your slices.

In the example below, mainApi is an RTK Query API slice.

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

In the app folder, create a file named StoreProvider (or any name you prefer). Import Provider from react-redux and makeStore and AppStore from the store.ts file.

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}

Next, import StoreProvider into the layout.tsx file in the app folder and wrap your application components with it.

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

Now Redux is available in your components, working just like in a standard React application.

Using Redux in Components

Actions

In your component, import useDispatch from react-redux along with the action creator from your slice. In the example above, the action creator is setUserData.

JavaScript

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

Next, use dispatch to send the data to the Redux store.

typescript

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

Selectors

In your component, import useSelector from react-redux along with the selector from your slice. In the example above, the selector is selectUserData.

typescript

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

Next, retrieve the data from the Redux store by calling useSelector inside your component. Pass your selector function to useSelector.

typescript

1
2const userData = useSelector(selectUserData);

That's it! The data is now available and ready to use in your component.

Pages router

Written on July 15, 2023.

Creating a Slice

Documentation: https://redux-toolkit.js.org/api/createSlice

Create a file named after the slice of state it will represent. In this example, the file is named searchSlice.ts.

Inside the file, define the initialState and create the 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 — this is a special reducer for Next.js that works above of the existing state if it already exists.

Creating the store

Import your slice into store.ts. When exporting the store, wrap it using createWrapper from 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);

Setting up `_app.tsx`

In _app.tsx, import wrapper from store.ts and Provider from react-redux. Then, extract store and props using wrapper and pass the store instance to the Provider component.

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;

Using Redux in components

To update the state, use useDispatch from react-redux and import the required action creator from your slice.

To access data from the state, import the selector function from your slice and use useSelector from react-redux.

GitHub

Next and Redux

This reference article is intended for those who already understand how Redux works. It contains only the essential information on how to integrate Redux into a Next.js application.

Required Packages

You need to install:

react-redux

npm i @reduxjs/toolkit react-redux

next-redux-wrapper

npm i next-redux-wrapper

Documentation: https://www.npmjs.com/package/next-redux-wrapper

react-redux

npm i react-redux

Documentation: https://react-redux.js.org/

App Router

Documentation

Creating a Slice

Create slices in a lib folder. In Redux documentation, this folder is often called features, but you can name it however you prefer.

Import createSlice from @reduxjs/toolkit. If you use TypeScript, you will also need PayloadAction.

The structure of a slice in the Next.js App Router is the same as in a standard Redux setup: define initialState, actions, and 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

Creating the Store

Create a store file inside the lib folder. Import configureStore from Redux Toolkit and create the store.

Also import reducers from your slices.

In the example below, mainApi is an RTK Query API slice.

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

In the app folder, create a file named StoreProvider (or any name you prefer). Import Provider from react-redux and makeStore and AppStore from the store.ts file.

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}

Next, import StoreProvider into the layout.tsx file in the app folder and wrap your application components with it.

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

Now Redux is available in your components, working just like in a standard React application.

Using Redux in Components

Actions

In your component, import useDispatch from react-redux along with the action creator from your slice. In the example above, the action creator is setUserData.

JavaScript

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

Next, use dispatch to send the data to the Redux store.

typescript

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

Selectors

In your component, import useSelector from react-redux along with the selector from your slice. In the example above, the selector is selectUserData.

typescript

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

Next, retrieve the data from the Redux store by calling useSelector inside your component. Pass your selector function to useSelector.

typescript

1
2const userData = useSelector(selectUserData);

That's it! The data is now available and ready to use in your component.

Pages router

Written on July 15, 2023.

Creating a Slice

Documentation: https://redux-toolkit.js.org/api/createSlice

Create a file named after the slice of state it will represent. In this example, the file is named searchSlice.ts.

Inside the file, define the initialState and create the 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 — this is a special reducer for Next.js that works above of the existing state if it already exists.

Creating the store

Import your slice into store.ts. When exporting the store, wrap it using createWrapper from 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);

Setting up `_app.tsx`

In _app.tsx, import wrapper from store.ts and Provider from react-redux. Then, extract store and props using wrapper and pass the store instance to the Provider component.

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;

Using Redux in components

To update the state, use useDispatch from react-redux and import the required action creator from your slice.

To access data from the state, import the selector function from your slice and use useSelector from react-redux.

GitHub

Next and Redux

Required Packages

App Router

Creating a Slice

Creating the Store

Redux provider

Using Redux in Components

Actions

Selectors

Pages router

Creating a Slice

Creating the store

Setting up _app.tsx

Using Redux in components

Next and Redux

Required Packages

App Router

Creating a Slice

Creating the Store

Redux provider

Using Redux in Components

Actions

Selectors

Pages router

Creating a Slice

Creating the store

Setting up _app.tsx

Using Redux in components

Setting up `_app.tsx`

Setting up `_app.tsx`