How to Build a React App with Redux for State Management
Tags: javascript, react, redux, state
Published: 2023-03-26 22:12:24

React is a popular JavaScript library used for building user interfaces. Redux is a state management tool that provides a centralized store for managing state in a predictable way. Together, React and Redux provide a powerful combination for building complex applications.

In this tutorial, we will walk through the process of building a simple React app with Redux for state management. We will cover the following topics:

1. Setting up a new React project with Redux
2. Creating a Redux store and defining initial state
3. Creating actions and reducers to manage state
4. Connecting components to the Redux store

## Prerequisites

Before we get started, make sure you have the following:

- Node.js installed on your machine
- Basic knowledge of React

## Setting up a new React project with Redux
The first step is to create a new React project. Open up your terminal and run the following command:

```lua
npx create-react-app my-app
```
This will create a new React project called **_my-app_** in your current directory. Once the project is created, navigate to the project directory:

```bash
cd my-app
```
Next, we need to install the _**redux**_ and **_react-redux _**libraries:

```bash
npm install redux react-redux
```
## Creating a Redux store and defining initial state
The next step is to create a Redux store and define the initial state. In the **_src_** directory, create a new file called **_store.js_**:

```js
import { createStore } from 'redux';

const initialState = {
  count: 0,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        count: state.count - 1,
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

```
In this example, we are creating a simple counter application. The initial state of the store is an object with a _**count**_ property set to 0. We are also defining a reducer function that takes the current state and an action as arguments, and returns a new state based on the action type.

## Creating actions and reducers to manage state
The next step is to create actions and reducers to manage state. In the **_src_** directory, create a new file called _**actions.js**_:

```js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

```
In this example, we are creating two actions: **_increment_** and **_decrement_**. These actions simply return an object with a _**type**_ property that corresponds to the action type defined in the reducer.

Next, create a new file called **_reducers.js_**:

```js
import { combineReducers } from 'redux';

function count(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

const rootReducer = combineReducers({
  count,
});

export default rootReducer;

```
In this example, we are defining a separate reducer function for the **_count_** property of the state object. We are also using the **_combineReducers_** function from Redux to combine all of our reducers into a single rootReducer.

## Connecting components to the Redux store

The final step is to connect our components to the Redux store. In the _**App.js**_ file, import the _**Provider**_ component from **_react-redux_** and the _**Redux**_ store from **_store.js_**:

```js
import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <h1>Counter App</h1>
        <Counter />
      </div>
    </Provider>
  );
}

export default App;

```
Here, we are wrapping our main **_App_** component with the **_Provider_** component, which makes the Redux **_store_** available to all child components. We pass the _**store**_ object as a prop to the **_Provider_** component.

Next, create a new file called **_Counter.js_** in the _**src**_ directory:

```js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

function Counter(props) {
  const { count, increment, decrement } = props;

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  count: state.count,
});

const mapDispatchToProps = {
  increment,
  decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

```
In this example, we are creating a new _**Counter**_ component that displays the current count value from the Redux store. We are also defining two click event handlers for the increment and decrement buttons that dispatch the **_increment_** and _**decrement**_ actions respectively.

We are using the **_connect_** function from **_react-redux_** to connect our _**Counter**_ component to the Redux store. The **_mapStateToProps_** function maps the **_count_** property from the Redux store to a prop called _**count**_ in our component. The _**mapDispatchToProps**_ object maps our **_increment_** and **_decrement_** action creators to props in our component.

That's it! We have successfully built a simple React app with Redux for state management.

**_Conclusion_**
In this tutorial, we walked through the process of building a simple React app with Redux for state management. We learned how to create a Redux store, define initial state, create actions and reducers, and connect components to the Redux store. With these concepts in mind, you should be able to build more complex applications with React and Redux.

You can find the complete source code for this project on GitHub: https://github.com/J-Sandaruwan/counter-app-redux