Building a React App with Redux

Introduction

To get started with this tutorial, you'll need to have Node.js and npm installed on your computer.

Step 1: Create a new React app

Create a new React app using create-react-app by running the following command in your terminal:

npx create-react-app react-redux-app

Step 2: Install Redux

Install Redux by running the following command in your terminal:

npm install redux react-redux

Step 3: Create a Redux Store

Create a new file called store.js and add the following code:

import { createStore } from 'redux';

const initialState = {
  count: 0
};

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

const store = createStore(reducer);

export default store;

Step 4: Connect the Redux Store to the React App

Open the App.js file and replace the existing code with the following:

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

Conclusion

You now have a basic understanding of how to use Redux for state management in your React applications.