Using React-Redux Hooks

Introduction

React-Redux hooks provide a modern way to connect React components to Redux stores using hooks such as useSelector and useDispatch. This approach simplifies the process of state management in React applications.

Key Concepts

• useSelector: A hook that allows you to extract data from the Redux store state.
• useDispatch: A hook that gives you access to the dispatch function from the Redux store, allowing you to send actions.
• Provider: A component that makes the Redux store available to any nested components.

Step-by-Step Guide

1. Set Up Redux Store

import { createStore } from 'redux';

const initialState = { count: 0 };

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

const store = createStore(reducer);

2. Wrap Your App with Provider

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

function App() {
    return (
        <Provider store={store}>
            <YourComponent />
        </Provider>
    );
}

3. Use useSelector and useDispatch in Components

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

function YourComponent() {
    const count = useSelector((state) => state.count);
    const dispatch = useDispatch();

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

Best Practices

• Keep your Redux state minimal and normalized.
• Use action creators to create actions, making them reusable.
• Leverage useSelector carefully to avoid unnecessary re-renders.
• Organize your Redux-related code (actions, reducers, and selectors) in a structured manner.

FAQ