Redux In Easy Steps

Redux is a predictable state container for JavaScript apps. … You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies). In short, Redux allows you to manage state for your web applications built in any JavaScript framework such as React, Meteor, or Angular.

Getting Started

$ npx create-react-app learn-redux
then go in your new folder and run
$ npm install redux react-redux

Redux is the state management package and react-redux give us the ability to connect react and redux together. We will step up redux in 4 easy steps.

- Reducer

Create a reducers folder and files where you specify your actions that will change your state .

Let’s create a counter reducers that will increment or decrement on click and isLogged ( a boolean) that will change the state to false to true.

-src
-reducers
-counter
-isLogged

The first argument is your state that is set to 0 and the second argument is your action where you call the action.type and will switch between cases .

Switch always require a default return

Same for the isLogged a state set to false and an action that will be called with action.type and switch between cases.

each reducer will be in a different file

Last thing in the reducers folder, create an index.js to import all our reducer, it will help us to import all the reducer at once in App.js with a tool from redux called combineReducer .

import all the reducers and combineReducer and set to a variable allReducers

- Store

Let’s go back in the main index.js and import 2 things:

import {createStore) from ‘redux’ & import allReducer from ‘./reducers’

Then we set a store variable to createStore and in the parentheses allReducer. To visual our state we can import a nice extension from chrome Redux devTools . and need to add a few line in your store variable.

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
inspect element and now you have a redux section

Last thing we want to have access to our state in the entire app and we can wrap our <app> with provider and we are all set!!!

import Provider and wrap app to it and take an argument and we pass it the store variable

- Accessing your state

import useSelector , in the useSelector select which state and just call the variable
we have our counter state !!

Same thing if we want to use isLogged

- Action / Dispatch

Very simple export the action and set the type of action.type

Then we import our action and useDispatch from ‘react-redux’ that give us the ability to dispatch an action.

We set dispatch variable to useDispatch() and onClick a call back function with dispatch and in the parentheses increment.

Same process for Decrement we create a new function in our actions/index.js

Remember all actions are in the same files while reducers will have separates files
import decrement and use dispatch

Last thing if we want to increment by 5 instead of one we can pass 5 as an argument and make few change in actions and reducers.

we pass 5 as an argument

in actions/index.js we add an argument and a new key (usually called payload) with the argument

nr as argument and payload with the key nr

and Finally in our Reducer we switch +1 to action.playload where about it s equal to our argument

now we increment by 5

Redux requires some setup but when it’s done and with some practice managing your states will be so easier.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store