Understanding Redux and React-Redux: Simplify Your React State Management

A JS library for predictable and maintainable global state management

Core Principles of Redux:

1. Single Source of Truth: The state of your application is stored in one object tree inside a single store.
2. State is Read-Only: You cannot modify the state directly; instead, you dispatch actions.
3. Changes are Made with Pure Functions: Reducers specify how the state changes in response to an action and must be pure functions.

Understanding Redux and React-Redux: Simplify Your React State Management

Managing state in a React application can become challenging as your app grows in complexity. Redux, along with React-Redux, provides a powerful solution to centralize and manage state efficiently. Let’s explore what they are and how they work together.

What is Redux?

Redux is a predictable state container for JavaScript applications. It helps manage the state of your app in a single centralized store, making it easier to debug and track state changes over time.

Core Principles of Redux:

1. Single Source of Truth: The state of your application is stored in one object tree inside a single store.
2. State is Read-Only: You cannot modify the state directly; instead, you dispatch actions.
3. Changes are Made with Pure Functions: Reducers specify how the state changes in response to an action and must be pure functions.

What is React-Redux?

React-Redux is the official Redux binding for React. It provides tools to connect your Redux store with React components seamlessly. With React-Redux, your components can subscribe to changes in the store and dispatch actions to update the state.

Key Concepts in Redux and React-Redux

1. Store

The store is a JavaScript object that holds the application's state. It is created using the createStore function from Redux.

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);        

2. Actions

Actions are plain JavaScript objects that describe what you want to do. They have a type property and can optionally include a payload.

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

3. Reducers

Reducers are pure functions that take the current state and an action as arguments and return a new state.

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

4. Provider

React-Redux provides the Provider component to make the Redux store available to your React components.

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

<Provider store={store}>
  <App />
</Provider>;
        

5. useSelector and useDispatch Hooks

• useSelector: Access state from the Redux store.
• useDispatch: Dispatch actions to update the state.

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

const Counter = () => {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};