How to update the Redux store from component

Addo Daniel Larbi
4 min readAug 23, 2021

Redux is a predictable state container for JS apps. Redux helps us write applications that behave consistently, run in a different environment (client, server, and native), and are easy to test. It also helps us centralize our applications' state and logic which enables powerful capabilities as redo/undo, state persistence, and much more. It has a great debugging tool (Redux dev tools) that helps us to track how, when, where an application state is changed. Its flexible nature helps us easily integrate Redux into other applications

We first need to create the react app npx create react-app brandCommission This command will simply create a react app named “brandCommisssion”. Now let us set up of project structure, delete all unnecessary files. Let us add the redux react-redux packages by running the following command npm i redux react-redux --save

Now let us create the redux directory. This directory will contain the actions reducers and store.js file. Let us create the store first

store.js

1. import { createStore } from 'redux';2. import rootReducer from './reducers';3. const store = createStore(4. rootReducer,5. window.__REDUX_DEVTOOLS_EXTENSION__ && 7.window.__REDUX_DEVTOOLS_EXTENSION__()),8. );9. export default store;

In line 1, we import the “createStore” function is used for creating our store as the name goes. Here we pass 2 arguments to the function. The first is the rootReducer, this is where we manage our state. We can look at it as our database table. Also, we pass the Redux dev tool extension which will help us track information in the browser. We will look at that later. Next we create our reducer functions

redux/reducers/index.js

import { combineReducers } from 'redux';import addBrandCommissionReducer from './addBrandCommissionReducer';import loginReducer from './loginReducer';const rootReducer = combineReducers({addBrandCommissionReducer,loginReducer,});export default rootReducer;

This is where we have more tables, in our case, we have the login table and the brandCommission table. Now let us create our login and brandCommission reducers

redux/reducers/brandCommissionReducer.js

const initialState = [ {  brand: 'Nike',  commission: '12.5', }, {  brand: 'Adidas',  commission: '10.5', },];const AddBrandCommissionReducer = (state = initialState, action) => {switch (action.type) { case 'ADD_ADMINDATA_REQUEST':  return state.concat([action.adminData]); default:  return state; }};export default AddBrandCommissionReducer;

redux/actions/brandCommissionActions.js

const addBrandCommissions = (adminData) => ({ type: 'ADD_ADMINDATA_REQUEST', adminData,});export default addBrandCommissions;

Now our redux app is almost ready, actions, reducers, and store is set up. Now let us create the UI component and connect the application to redux.

component/brandCommisionUI.js

import React, { useState } from 'react';import { useDispatch } from 'react-redux';import addBrandCommissions from '../redux/actions/brandCommissionActions';const AddBrandCommission = () => {const [adminData, setFormData] = useState({ brand: '', commission: '',});const dispatch = useDispatch();const { brand, commission } = adminData;const handleChange = (e) => setFormData({ ...adminData, [e.target.name]: e.target.value });const handleSubmit = (e) => { e.preventDefault(); dispatch(addBrandCommissions(adminData));};return (<> <h4>here, we will add commision here</h4> <form method="POST" onSubmit={handleSubmit}>  <div className="form-group">  <input type="text" name="brand" value={brand} onChange=  {handleChange} placeholder="Enter brand here" required />  </div>  <div className="form-group">   <input type="decimal" name="commission" value={commission} onChange={handleChange} placeholder="Enter commission here" required />  </div>  <div className="form-group">   <button type="submit" name="addBrandComission">Add Brand and Commission</button>  </div> </form></>);};export default AddBrandCommission;

Now our UI component is set up and ready, but our application will not work without connecting the react app to redux. We can do that with the { Provider } package. Here is how we configure it. First import import { Provider } from 'react-redux'; Also, since we have the store.js in the redux directory, let us import it here. import store from 'redux/store.js';

In the entry point of the app, ie. src/index.js let us wrap the app with the provider and pass the store as attribute

<Provider store={store}> <App /></Provider>

Now our app is connected. Let us see how it looks like in the browser, thanks to the Redux DevTools library and extension

The screenshot below shows the default store

Redux default store

The next screenshot show when an action has been dispatched in the browser and the store updated

Now you can find the updated state and the action dispatched. This is a really cool technology. Thank you for taking the time to read my article, I hope this is helpful. My next article will be “retrieving and manipulating state in redux application”

--

--