ReactJS
Redux in NextJS
Introduction
Redux has to be started from scratch for implementation in a Next.js app without Redux Toolkit. Thus, follow the following steps for a step-by-step guideline:
Installing Necessary Packages
First, install redux and react-redux using the following command:
npm install redux react-reduxSetting up the store
The store folder would be created at the base of the project. In it, you create a file called index.js, where the Redux store will be set up and initialized.
// store/index.jsimport { createStore } from 'redux';import rootReducer from '../reducers';const store = createStore(rootReducer,// Enable Redux DevTools Extension if availabletypeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());export default store;Define your reducers
Next, create a folder in the file structure of your project called reducers. Create a file inside the reducers folder with the name index.js, which will hold the combineReducers.
// reducers/index.jsimport { combineReducers } from 'redux';import exampleReducer from './exampleReducer';const rootReducer = combineReducers({example: exampleReducer,// Add other reducers here});export default rootReducer;You can then freely create other files according to your wishes; example: exampleReducer.js.// reducers/exampleReducer.jsconst initialState = {data: null,};const exampleReducer = (state = initialState, action) => {switch (action.type) {case 'SET_DATA':return {...state,data: action.payload,};default:return state;}};export default exampleReducer;Connecting your App to The Store
In Next.js, you will have to connect your app to the Redux store. For this, you will create a higher-order component (HOC) that supplies the store to your app. Create a file called withRedux.
// withRedux.jsimport React from 'react';import { Provider } from 'react-redux';import store from './store';const withRedux = (Component) => {const ReduxComponent = (props) => (<Provider store={store}><Component {...props} /></Provider>);return ReduxComponent;};export default withRedux;Eventually, wrap your _app.js component with this HOC:// pages/_app.jsimport withRedux from '../withRedux';function MyApp({ Component, pageProps }) {return <Component {...pageProps} />;}export default withRedux(MyApp);Access redux state and dispatch actions
In your components, you can now access the redux store state and dispatch actions using the react-redux hooks useSelector and useDispatch:
import React from 'react';import { useSelector, useDispatch } from 'react-redux';const ExampleComponent = () => {const data = useSelector((state) => state.example.data);const dispatch = useDispatch();const setData = (newData) => {dispatch({ type: 'SET_DATA', payload: newData });};return (<div><p>Data: {data}</p><button onClick={() => setData('New Data')}>Set Data</button></div>);};export default ExampleComponent;
Now that you've set up Redux manually in a Next.js application using these steps and not Redux Toolkit, you have a good insight into the core ideas behind Redux and how it can be flexibly molded to manage your application's state.
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.
ReactJS