advanced#react#redux#state-management
Building a React App with Redux
Learn how to create a React app that uses Redux for state management.
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.