Pre-requisites:

• Basic knowledge of Javascript
• Basic knowledge of React.js

This blog explains the three key principles of Redux by demonstrating a small application for ordering flowers. The application takes input for the number and type of flowers, and generates an order summary based on the input using React-Redux.

Redux is a state container that provides predictability and consistency when writing JavaScript apps. Redux is primarily used as a state management tool with React, you can use it with any other JavaScript framework or library.

Create Project
Create a react project with npx install redux <project name> and install redux package with command npm install redux .

ActionType

First define a type object containing the action type.

                                                       flowerActionType.js

Action

Interactions between an application and a store are achieved through actions. Actions are plain JavaScript objects that must contain a ‘type’ property, indicating the type of the action being performed. Typically, this property is defined as a string constant. Whenever the application state changes, the ‘orderNumberOfFlowers’ and ‘setFlowerType’ actions will update the value property.

                                                 flowerActions.js

Reducer

Whenever an action is sent to the store, Reducer defines how the state changes. In terms of code, reducers are functions that accept the current state and an action as arguments, and return the next state of the application.

For example, the flower reducer takes the initial state, updates its property values based on the action, and returns the next state.

                                                      flowerReducer.js

Redux store

There should only be one Redux store for the entire application which holds the state and allows for easy access and updates.

                                                    createStore.js

Provider Component

React Redux provides a <Provider /> component that enables access to the Redux store throughout the app. To make the store available to the BuyFlower component, wrap it with the Provider component and pass the store as a prop.

                                                               App.js

useSelector() and useDispatch() hooks are used to subscribe to store and dispatch actions. To get hold of any state maintained in a redux store, we use useSelector() hook. useDispatch() hook returns a reference to the dispatch function from the redux store.

Whenever an input property changes, the onChange method dispatches an action to the reducer. The reducer then updates the application state accordingly.

                                                            BuyFlowers.js