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

Create a react app and install redux:

$ 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

Basically the reducer is how your action transform the state to the next state and it modify it.

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

It’s a Globalized state where we keep all the data(state) of our app and that is accessible everywhere in the app.

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

Now we have set our store and reducers we can have access to our state everywhere. We just need to import {useSelector} from ‘react-redux’ and create a variable set to a function useSelector and specify with state we want to access.

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

We have access to our state but how can we change it ?? here Action comes and action literally make an action to your reducer and modify your state. Create an actions folder in src and an index.js

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.