Easy setup react redux with next.js (React)

Question

I have seen next.js example to use redux. But is there any easy way to setup redux with next.js? I want to setup redux how i used to setup with react.js

Does this answer your question? [Using react redux with next.js](https://stackoverflow.com/questions/52095681/using-react-redux-with-next-js) — Shankar Ganesh Jayaraman, Dec 23 '20 at 08:40
I wanted a solution with npx create-next-app and similar setup how i used to with react. Now i can do it. and shared my answer here too. — Nasir Khan, Dec 23 '20 at 09:07
https://stackoverflow.com/questions/52095681/using-react-redux-with-next-js/71894559#71894559 — Yilmaz, Apr 16 '22 at 14:10

score 5 · Answer 1 · answered Dec 23 '20 at 08:34

Assuming you have knowledge in Redux with React.

Firstly, install these packages

$ npm install next-redux-wrapper react-redux redux redux-thunk --save

$ npm install redux-devtools-extension --save-dev

Override or create the default App, create the file ./pages/_app.js as shown below:

import withRedux from 'next-redux-wrapper'
import { Provider } from 'react-redux'
import { withRouter } from 'next/router'
import App from 'next/app'

import createStore from 'store/createStore'

class MyApp extends App {
  render () {
    const { Component, pageProps, router, store } = this.props
    return (
          <Provider store={store}>
              <Component router={router} {...pageProps} />
          </Provider>
    )
  }
}

export default withRedux(createStore)(
  withRouter(MyApp)
)

In your pages/component, you can use Redux as you do normally.

for store I am getting below error. Property 'store' does not exist on type 'Readonly, any, {}>; router: Router; __N_SSG?: boolean | undefined; __N_SSP?: boolean | undefined; __N_RSC?: boolean | undefined; }> & Readonly<...>' — Anonymous Creator, Jan 08 '22 at 09:36

score 1 · Answer 2 · answered Dec 23 '20 at 08:24

1

https://github.com/vercel/next.js/tree/canary/examples/with-redux-wrapper

cant get any easier than this

answered Dec 23 '20 at 08:24

Neezar

56
1
1
4

want to use with this "npx create-next-app" – Nasir Khan Dec 23 '20 at 08:25
this repo comes with preconfigures redux setting, you just need to change according to your needs, else just copy how this repo did the setting on your empty nextjs app. – Neezar Dec 23 '20 at 08:40

DevLoverUmar · Answer 3 · 2020-12-23T13:35:57.957

I would recommend using redux toolkit because it reduces boilerplate code in redux...

With createSlice you create Action and Reducer at the same time. And in case of dispatching API calls to the backend and performing suitable state mutations for pending, fulfilled and rejected API calls, createAsyncThunk is the Best!

As per my personal experience, if you are asking this question just for initial learning, then your first setup that you attached as an answer is enough but for a real App, so should definitely go with Redux Toolkit. You can check this sandbox example

Nasir Khan · Accepted Answer · 2020-12-23T14:25:25.193

1

First i created simple next.js app with "npx create-next-app" Then i installed "npm i redux react-redux redux-thunk redux-devtools-extension

Then I created general redux setup in a folder called "store" and folder structure is like the following image and code is for store.js

Code is for reducer > index.js

FINALLY created a _app.js file in pages folder and code is like this

If anyone still have question about setup please let me know...

edited Dec 23 '20 at 14:25

answered Dec 23 '20 at 09:01

Nasir Khan

753
1
9
22

1

Please note that we are [officially recommending](https://redux.js.org/style-guide/style-guide/#use-redux-toolkit-for-writing-redux-logic) to use redux toolkit over vanilla redux. It will save you a ton of boilerplate down the road. Check out [this page of the official redux tutorial](https://redux.js.org/tutorials/fundamentals/part-8-modern-redux) for a short introduction. – phry Dec 23 '20 at 09:40
1

Exactly! @Nasir Khan I updated my answer for you. Please accept and upvote my answer, if it solves your problem. – DevLoverUmar Dec 23 '20 at 13:37
1

I don't want to use any other tool. I want to use react redux setup where i was comfortable. And i setup that way, Thank You. – Nasir Khan Dec 23 '20 at 14:24
Where is a picture of _app.js? You just duplicated reducer > index.js??? – Ismoil Shokirov Jan 06 '22 at 12:58

score 1 · Answer 5 · answered Dec 23 '20 at 09:57

1

Here is my simplest way, you can follow it. https://github.com/imimran/next-redux-example

answered Dec 23 '20 at 09:57

Al Imran Hossain

119
1
2
12

Easy setup react redux with next.js (React)

5 Answers5