Getting started with Redux with React

What is Redux?

Redux is a Predictable State Container for JS Apps. It is mostly used as a state management tool with React. The state of your app is kept in a store and each component can access any state that is needed.

Why use it?

If you still don’t know if you need redux, you won’t need it. If your app gets bigger and managing app state becomes more of a pain, and you are looking for making it easy and simple, then you need redux.

How does Redux work?

There are three building parts: actions, store, and reducers.

Actions

Actions are events. With actions you send data from your application to your redux store. The data can be from user interactions, API calls or form submissions. Actions are sent using the store.dispatch() method.

Actions are JS objects and must have a type property to indicate the type of action to be carried out and also a payload that contains the information to be transferred. Actions are created with the action creator.

Example for action use:

You import the actions you have been written in a file in the component, where you want to use them. Here on the first button click you dispatch the increment by 5 by clicking plus. The next button decrement the number by -1.

import {increment, decrement} from "./actions";
<button onClick={() => dispatch(increment(5))}>+</button>
<button onClick={() => dispatch(decrement())}>-</button>

Example for action creator:

The first one is the action Increment with the type “INCREMEMT” and the payload is a number. The second action is type “DECREMENT” and no payload. As you can see no logic is added and is just a function with a type and some data which can be transferred.

export const increment = (number) => {
return {
type: 'INCREMENT',
payload: number
}
}
export const decrement = () => {
return {
type: 'DECREMENT'
}
}

Reducers

Reducers are pure functions that take the current state of an app, perform an action, and return a new state.

These states are stored as objects. They specify how the state of an app changes in response to an action sent to the store. Reducers are based on the reduce function in JS, where a single value is calculated from multiple values after a callback function has been carried out.

Example for reducers

Here you can see a counterReducer. It starts with a state of 0. You can also add the initial state in a separate variable. You can see two options, action.types: “INCREMENT” and “DECREMENT”. INCREMENT takes the state and adds the action.payload which is transferred in the action and can be any given number put after the increment(anyNumber). DECREMENT takes the state and deducts it by -1. You have to add a default which here just returns the current state.

const counterReducer = (state=0, action) => {
   switch(action.type) {
      case 'INCREMENT':
      return state + action.payload
      case 'DECREMENT':
      return state - 1
      default:
      return state
   }
}
export default counterReducer;

Another example for reducer

The loggedReducer starts with a state of false. You have only one action.type called “SIGN_IN”. It returns the opposite of the current state.

const loggedReducer = (state=false, action) => {
    switch(action.type) {
       case 'SIGN_IN':
       return !state
       default:
       return state
    }
}
export default loggedReducer;

Store

The application state will be find in the store. You should only have one store in an app. You can access the state stored or update the state anywhere in your app.

This is how you create a store:

You import the createStore function from redux and add a const variable. You could also just write const store = createStore(allReducer). I added window.. because I wanted to use the Redux DevTools Extensions. Check it out here:

Redux DevTools

You have to wrap your entire app with a provider component and the store created. This is how you can access the state from anywhere within the app.

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {createStore} from "redux";
import allReducer from "./reducers"
import {Provider} from "react-redux"
const store = createStore(allReducer, window._REDUX_DEVTOOLS_EXTENSION_ && window._REDUX_DEVTOOLS_EXTENSION_())
ReactDOM.render(
<React.StrictMode>
  <Provider store={store}>
    <App/>
  </Provider>
</React.StrictMode>,
document.getElementById('root'));

Hooks

React Redux uses custom React hooks that enables your React components to interact with the Redux store.

useSelector reads a value from the store state and subscribes to updates.

useDispatch return the store’s dispatch method to let you dispatch actions.

The hooks are imported from react-redux. Also the actions are imported.

To access the state you use useSelector. counter will show the current state and the variable isLogged will show if a user is logged in or not.

If you press one of those buttons, you use dispatch to change the state and send it to the action. In the example () => dispatch(increment(5)) the click uses the increment action with the payload of 5. Every click means an increment by 5.

import {useSelector, useDispatch} from "react-redux";
import {increment, decrement} from "./actions";
function App() {
const counter = useSelector(state => state.counter)
const isLogged = useSelector(state => state.isLogged)
const dispatch = useDispatch()
return (
  <div>
    <h1>Counter {counter} </h1>
    <button onClick={() => dispatch(increment(5))}>+</button>
    <button onClick={() => dispatch(decrement())}>-</button>
    {isLogged && <h3>Valuable information I shouldn't see</h3>}
  </div>
);
}
export default App;

For further reading look up here:

Getting Started with React Redux | React Redux

Have a look at my simple Counter with Redux and React on GitHub:

GitHub - DamarisGoebel14/reduxreactcounter

What made me finally get an understanding of Redux was this video. My code is also based on that:

I hope this blog post is easy to understand and will help you to get Redux :)