How to Build a React App with Redux for State Management

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:

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:

cd my-app

Next, we need to install the redux and _react-redux _libraries:

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:

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:

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:

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:

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:

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