09 November React Js / Redux

Redux Made Easy: Beginner’s Guide to State Management in React JS

Redux Made Easy Beginner's Guide to State Management in React JS bilal shafqat

Table of Contents

Redux made easy: Beginer's guide to state management in React JS

Redux is a powerful state management library often used in React applications. To help you get started with Redux, we’ll walk through the process of creating a simple counter application. By the end of this guide, you’ll have a solid understanding of Redux concepts like actions, reducers, and the store.

Step 1: Setting Up the Project

Before we dive into Redux, let’s set up a basic React project.


1. Initialize a New React Project:

				
					npx create-react-app redux-counter
cd redux-counter
2. Install Redux and React-Redux: 
				
					npm install redux react-redux

Step 2: Understanding Redux Concepts

Before implementing the counter, let’s briefly discuss key Redux concepts.
  1. Store: The store holds the entire state of the application.
  2. Actions: Actions are plain JavaScript objects that describe a type and any payload needed to change the state
  3. Reducers: Reducers are pure functions that take the current state and an action and return a new state.

Step 3: Creating the Redux Store

First, create a directory for your Redux-related files: 
				
					mkdir src/redux
Inside the src/redux folder, create a file called store.js: 
				
					import { createStore } from 'redux';

// Initial state
const initialState = {
  count: 0,
};

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

// Create Redux store
const store = createStore(counterReducer);

export default store;
Here, we define our initial state with a count of 0. The counterReducer function handles two actions: INCREMENT and DECREMENT, which update the count accordingly.

Step 4: Connecting Redux to React

Next, integrate Redux with your React app. Open src/index.js and wrap the root component with the Provider component from react-redux:

				
					import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './redux/store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
The Provider component makes the Redux store available to the entire app.

Step 5: Creating the Counter Component

Now, let’s create the counter component. Open src/App.js and add the following code:

				
					import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function App() {
  // Access state and dispatch from Redux
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Redux Counter</h1>
      <p>{count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default App;

In this component:

  • useSelector is used to select the count from the Redux state.
  • useDispatch is used to dispatch actions to the Redux store.

Step 6: Running the Application

Run the application using the following command: 
				
					npm start
Your browser will open with the counter application. You should be able to increment and decrement the counter using the buttons.

Conclusion

By building this simple counter application, you’ve covered the essential concepts of Redux, including actions, reducers, and the store. Redux may seem complex at first, but with practice, it becomes an invaluable tool for managing state in larger applications. Happy coding!

classifieds in dubai

One Reply to “Redux Made Easy: Beginner’s Guide to State Management in React JS”

Leave A Comment

SOCIAL