Redux and React Redux

Level : Advanced
Mentor: Shailendra Chauhan
Duration : 00:03:00

ReactJS - Redux

ReactJS with Redux is a powerful combination for state management in web applications. It allows you to centralize your application's state and manage it efficiently, ensuring a predictable and scalable architecture.

Example

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
function App() {
 return (
  <Provider store={store}>
   {/* Your app components */}
  </Provider>
 );
}

Store

The Redux store is a single source of truth for your application's state. It holds the complete state tree and can be accessed or modified using actions and reducers.

Example

import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);

Action

Actions are plain JavaScript objects that represent something that happened in your application. They are dispatched to the Redux store to trigger state changes.

Example

const incrementCounter = () => ({
 type: 'INCREMENT',
});

Reducers

Reducers are pure functions that specify how the application's state changes in response to actions. They take the current state and an action as input and return the new state.

Example

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

Action Creators

Action creators are functions that create and return action objects. They simplify the process of creating actions with predefined properties.

Example

const incrementCounter = () => ({
 type: 'INCREMENT',
});

Component

Components are the building blocks of a React application. They render UI elements and can be connected to the Redux store to access and update state.

Example

import { connect } from 'react-redux';
const Counter = ({ count, increment }) => (
 <div>
  <p>Count: {count}</p>
  <button onClick={increment}>Increment</button>
 </div>
);
const mapStateToProps = (state) => ({
 count: state.counter,
});
const mapDispatchToProps = {
 increment: incrementCounter,
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Redux API

Redux provides a set of APIs and methods for managing the state, including createStore, combineReducers, and applyMiddleware.

Example

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const rootReducer = combineReducers({
 // Combine your reducers here
});
const store = createStore(rootReducer, applyMiddleware(thunk));

mapStateToProps

mapStateToProps is a function used in the connect function to map the state from the Redux store to the props of a component.

Example

const mapStateToProps = (state) => ({
 count: state.counter,
});

mapDispatchToProps

mapDispatchToProps is used in the connect function to map action creators to the props of a component, making it easier to dispatch actions.

Example

const mapDispatchToProps = {
 increment: incrementCounter,
};

Provider Component

The Provider component is part of the React-Redux library and is used to wrap the root of your React application. It provides the Redux store to all components in your app.

Example

import { Provider } from 'react-redux';
import store from './store';
function App() {
 return (
  <Provider store={store}>
   {/* Your app components */}
  </Provider>
 );
}

Use the Connected Component

You can now use the connected component in your application as you would with any other React component. It will have access to the Redux store's state and the ability to dispatch actions to update the state.

Example

// App.js
import React from 'react';
import './App.css';
import Counter from './Counter';
function App() {
 return (
  <div className="App">
   <Counter />
  </div>
 );
}
export default App;
Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this