Simple React + Redux example

In the previous article we have seen Spring boot with react example. In this example we will see how to configure React with Redux. Now what is all this fuss about Redux?

In simple term Redux is used to manage state of your application. As your application starts growing it gets difficult to manage state of your application. This is when Redux comes to help you.

Redux data flow

Lets see a simple counter example. Assuming npm is already installed in your machine. If not, install npm.


Step 1. Commands to create and start a react application, click here for more details.

> npx create-react-app my-app
> cd my-app
my-app> npm start

Step 2. Install Redux. To know more, click here.

my-app> npm install --save redux

Step 3. Install react-redux

React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

my-app> npm install --save react-redux

Note - Step 2 and 3 should add dependencies in package.json

Step 4. Create/Edit below file

App.js

This is the component which triggers an action

AppAction.js

Actions are plain JavaScript objects. Actions must have a type property that indicates the type of action being performed. Types should typically be defined as string constants

AppReducer.js

Reducers specify how the application's state changes in response to actions sent to the store. Remember that actions only describe what happened, but don't describe how the application's state changes. Reducer will always mutate the state.

AppStore.js

There can be only one store in a Redux application.

Index.js

Output -