Redux | State Management | React Tutorial

Introduction to Redux for state management

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments, and are easy to test. This tutorial covers the basics of Redux and how to use it for state management in React applications.

Key Points:

Redux is a predictable state container for JavaScript apps.
It helps manage the state of your application in a single place, called the store.
Redux uses actions and reducers to update the state.
React-Redux is the official binding library that allows you to use Redux with React.

Creating a Redux Store

The store holds the entire state of your application. To create a store, use the createStore function from Redux.

// Creating a Redux store
import { createStore } from 'redux';

// Reducer function
function counterReducer(state = { count: 0 }, 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;

Dispatching Actions

Actions are payloads of information that send data from your application to your Redux store. You send them to the store using the dispatch method.

// Dispatching actions
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

Connecting Redux to React

React-Redux is the official binding library that allows you to use Redux with React. Use the Provider component to pass the Redux store to your React components.

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

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

Using useSelector and useDispatch

The useSelector hook allows you to extract data from the Redux store state, and the useDispatch hook gives you access to the dispatch function.

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

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

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

export default Counter;

Async Actions with Redux Thunk

Redux Thunk is a middleware that allows you to write action creators that return a function instead of an action. This is useful for handling asynchronous operations.

// Setting up Redux Thunk
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import counterReducer from './reducer';

const store = createStore(counterReducer, applyMiddleware(thunk));

export default store;

// Async action creator
function fetchData() {
    return async dispatch => {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    };
}

Summary

In this tutorial, you learned about Redux for state management in React applications. Redux helps manage the state of your application in a single place called the store. You learned how to create a Redux store, dispatch actions, connect Redux to React using React-Redux, use the useSelector and useDispatch hooks, and handle async actions with Redux Thunk. Understanding Redux is essential for managing complex state in React applications.

React - Redux