React Redux Basics

1. Setting Up Redux

To use Redux in a React application, you first need to install the necessary packages:

npm install redux react-redux

Once installed, you need to set up a Redux store and provide it to your app using the Provider component from react-redux.

Edit Copy

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

// Define the reducer
const reducer = (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 the Redux store
const store = createStore(reducer);

// Main App component
function App() {
  return (
    <div>
      <h1>Counter</h1>
      <Counter />
    </div>
  );
}

// Counter component
function Counter() {
  return (
    <div>
      <p>Count: 0</p>
      <button>Increment</button>
      <button>Decrement</button>
    </div>
  );
}

// Wrap the app with Provider and pass in the Redux store
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

In this example, we define a simple Redux store and use the Provider to make the store accessible throughout the app. The reducer updates the state based on the actions dispatched.

2. Actions and Reducers

In Redux, actions are plain JavaScript objects that describe what happened in your application, while reducers specify how the state should change in response to actions.

For example, the action below increments the count value in the store:

Edit Copy

const incrementAction = { type: 'INCREMENT' }; // Action to increment count

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

Here, the action incrementAction is dispatched to the reducer, which updates the state accordingly.

3. Dispatching Actions

To update the state, you need to dispatch actions to the Redux store. This is done through the dispatch function, which is provided by the Redux store.

In a component, you can access the dispatch function using the useDispatch hook from react-redux.

Edit Copy

import { useDispatch } from 'react-redux';

function Counter() {
  const dispatch = useDispatch(); // Access dispatch

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

In this example, we use the useDispatch hook to dispatch actions when the buttons are clicked, updating the count value in the store.

4. Connecting Redux to Components

To access the Redux store's state in a component, you can use the useSelector hook from react-redux or the connect function. The useSelector hook allows you to select the state you need from the store.

Edit Copy

import { useSelector } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count); // Access state from Redux store

  return (
    <div>
      <p>Count: {count}</p>
      <button>Increment</button>
      <button>Decrement</button>
    </div>
  );
}

Here, the useSelector hook is used to retrieve the current value of count from the Redux store and display it in the component.

5. Summary

Redux is a powerful state management tool that helps manage application state in a predictable way. By using Redux with React, you can centralize your app's state and avoid prop drilling, making your app more maintainable and scalable. The Provider and connect functions from react-redux provide seamless integration between Redux and React.