CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxnext.js
Nasir Khan
Nasir Khan

Reputation: 813

Easy setup react redux with next.js (React)

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

Upvotes: 2

Views: 8165

Answers (5)

Nasir Khan
Nasir Khan

Reputation: 813

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

enter image description here

Code is for reducer > index.js enter image description here

FINALLY created a _app.js file in pages folder and code is like this enter image description here

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

Upvotes: 1

DevLoverUmar
DevLoverUmar

Reputation: 13933

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

Upvotes: 1

Al Imran Hossain
Al Imran Hossain

Reputation: 153

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

Upvotes: 1

Shankar Ganesh Jayaraman
Shankar Ganesh Jayaraman

Reputation: 1481

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.

Upvotes: 5

Neezar
Neezar

Reputation: 56

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

cant get any easier than this

Upvotes: 1

Related Questions