How to set up react-redux : A beginners guide

Introduction

In this guide today, we will walk you through the process of setting up the popular library react-redux in a React application. We will cover all the basic concepts and configurations needed to get started with using react-redux to manage the state of your application. By the end of this guide, you will have a solid understanding of how to set up and use react-redux in your React projects. Let’s get started!

Prerequisites

• Basic knowledge of React: As react-redux is an extension for react, it’s important to have a basic understanding of React concepts such as components, state, and JSX.
• Familiarity with Redux. react-redux is a library that allows you to use the Redux library with React. So it’s important to have a basic understanding of the principles of Redux such as the store, actions, and reducers.
• Node.js and npm (Node Package Manager). React-redux is a npm package, so you’ll need Node.js and npm installed on your computer to use it.
• A code editor. You’ll need a code editor to write your React and react-redux code.
• Basic knowledge of functional programming. React-redux is based on functional programming. So it’s helpful to have a basic understanding of concepts like pure functions and immutability.

What is react-redux

React-redux is a library that connects React with the Redux library. It provides a way for React components to access the state managed by Redux, and to dispatch actions to modify that state.  

Real world Application

A common use case for Redux in a React application is managing a shopping cart. In this example, the state of the application would include the items currently in the cart, the total price of those items, and any discounts.

When a user adds an item to their cart. An action dispatches with the type “ADD_TO_CART” and the payload would contain the item the user adds. The Redux store would then handle this action by updating the state to include the new item and recalculating the total price.

When the user removes an item from their cart, another action dispatches with the type “REMOVE_FROM_CART” and the payload would contain the item that was removed. The store would then update the state by removing that item and recalculating the total price.

React components that display the contents of the cart and the total price would interacts with the store using the connect function from react-redux. This would allow them to access the current state of the cart and re-render when the state changes.

By keeping the state of the shopping cart in a centralized store and using actions to update that state,keeping the application logic separate from the presentation of the data, making it easier to understand, debug and test.

How to set up react-redux: A beginners guide

Here is a step by step guide on setting up a react-redux project

1. First, you will need to have Node.js and npm (Node Package Manager) installed on your computer.
2. Next, create a new directory for your project and navigate into it in the command line.
3. Use npm to create a new React project by running the following command: npx
create-react-app my-app
4. Once the project is created, navigate into the project directory: cd
my-app
5. Now you will need to install the Redux and React-Redux libraries by running the following command: npm
install --save redux react-redux
6. Create a new directory in the src folder called ‘redux’ and inside the ‘redux’ folder create the following three files:

• actions.js
• reducers.js
• store.js

actions.js

In actions.js, you can define your action creators. For example:

export const increment = () => {
return {
type: 'INCREMENT'
}
}
export const decrement = () => {
return {
type: 'DECREMENT'
}
}

reducers.js

In reducers.js, you can define your reducer. For example:

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

store.js

In store.js, you will create a store using the createStore() method from the redux library and pass in the reducer as an argument.

import { createStore } from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
export default store

src/index.js

In your src/index.js file, wrap your root component in a <Provider> component and pass in the store:

import React from 'react';
//import react dom
import ReactDOM from 'react-dom';
//import css
import './index.css';
//import app
import App from './App';
//import provider
import { Provider } from 'react-redux';
//import store
import store from './redux/store';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
reportWebVitals();

Component

In your component file, you can use the connect function from react-redux to connect your component to the store and access the state and dispatch function as props:

import { connect } from 'react-redux';
function App({ count, dispatch }) {
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
}
const mapStateToProps = (state) => ({
count: state.count
});
export default connect(mapStateToProps)(App);

After successfully writing the codes you can run the application on the browser by typing npm start on the root folder of your project and then type localhost:3000 on the browser to view your app.

Try pressing the increment and decrement button and see the magic.

Conclusion

This is just a basic example and there’s a lot more to learn about React and Redux. This is a good starting point to understand the basics of how they work together. You are free to do more research.