ae OG NEXT. Setup Redux in NextJSaA! ©) Step #1: Installing Next App Let’s first install Nextjs using the following command: npx create-next-appa@latest Ensure that you use the following settings to achieve the same result as mine Ss a eee tee ets v What is your project named? .. redux-next PAC SCR CCR et een es v Would you like to use ESLint? .. No / Yes v Would you Like to use Tailwind CSS? . No / v Would you like to use “src/’ directory? .. No / Yes aCe me CR Rt ee emer te cr) ee anes v Would you Like to customize the default import alias (@/*)? .. No / Yes ? What import alias would you like configured? » @/* Wasif Alam in| (PT alt)3/14 ©) Step #2: Installing Redux Now, navigate to the root directory of the Nextjs app we've just created and proceed to install the following npm packages: npm i react-redux @reduxjs/toolkit Make sure your ‘package.json’ dependencies resemble this: "dependencies": { "@reduxjs/toolkit": "*%1.9.7", a tebgllt Wale farsi Se Deer ae "react-dom": "%18", "react-redux": "48.1.3" Wasif Alam in| (PT alt)rVEL So Step #3: Setting Up Redux Create a 'redux' folder within the 'src' folder, and set up the folders and files as shown lot WA C-leys Mec} sie , Ls Belt ne Pa We will be implementing a very basic counter app for an example. aC arty in| CE Cltyeae ©) Step #4: Creating a Redux Slice Place the following code within the Korole Ta el ec) (econ en (=H import { createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialstate: { count: 9, oa reducers: { increment(state) { rebar ead i, Colter (tae state.count--; oy }, 5 export const counterActions = counterSlice.actions; export default counterSlice; Wasif Alam in| (PT alt)6/14 ©) Step #5: Setting up the Redux Store Place the following code within the 'store.ts' iH import { configureStore } from '@reduxjs/toolkit'; import counterSlice from './slices/counterSlice'; Coe lsa mo haath a McLane dt adeh a eR paolo Sam counter: counterSlice.reducer, }, a Wasif Alam in| (PT alt)vaAe ©) Step #6: Setting up the StoreProvider Place the following code within the 'StoreProvider.tsx' file: "use client'; import { store } from './store'; import { Provider } from 'react-redux'; Cod olor emoLo ls RemeSh ob a deh ales aa { children }: { children: React.ReactNode } aan Saal bd ged ae) Ke| Sa Seed aaah dB sR BM Re Cen de ene tee Ba Wasif Alam in| (PT alt)8/14 ©) Step #7: Connecting Redux to Next.js Next, go to the 'src/app' folder and open ‘layout.tsx'. Import the 'StoreProvider' compoent. import { StoxeProvider } from '@/redux/StoreProvider'; Wrap the 'children' prop with 'StoreProvider'. export default function RootLayout({ children, Deven children: React.ReactNode; Hans baad baa aah Tg Ta {children} SMa UF i Wasif Alam in| (PT alt)Ta Step #8: Dispatching Actions & Accessing state Within the same 'src/app' folder create a folder named 'components' and create a file named ‘Counter.tsx’ inside of it. Should look something like this: ——= ACT mre CE CltyOar ©) Inside of the 'Counter.tsx' file we need to import a couple of hooks and our ‘counterActions' action creators for dispatching actions. Imports should look something like this: See atau import { useSelector, useDispatch } from 'react-redux'; import { counterActions } from '@/redux/slices/counterSlice'; Note - We have to use ‘use client’ directive at the top in order to access state and disptach actions in Naas aC arty in| (PT alt)reas ©) Now we need to add the following code in order to access state and dispatch actions inside of the ‘Counter’ component: const Counter = () => { const counter = useSelector( (state: any) = state.counter.count) ; const dispatch = useDispatch(); const incrementHandler = () = { dispatch(counterActions.increment()); ie const decrementHandler = () = { dispatch(counterActions.decrement()); ina Saab Peel Tg =) export default Counter; Wasif Alam in| (PT alt)yA ©) Next, simply return the following ‘div’ from the ‘Counter’ component to display a basic Ul in the browser: const Counter = () => { // Redux state, dispatch and handler // function goes here cake ag Seb Ag

{counter}