Concept

Redux is a state management library for JavaScript applications. It helps you manage the application state easily and efficiently.

Redux includes the following objects you need to know:

• The store is where the entire state of the application is stored. The state in Redux is considered to be "read-only" and can only be updated through actions.
• Action is a JavaScript object that contains information about the state change. Each action must have a "type" property to determine the type of action. Actions can also contain other data such as payload.
• Reducer is a JavaScript function that takes the current state and an action, and returns a new state. Reducer determines how to handle the action and update the state of the application.
• Dispatch is a method in the store that is used to send actions to the reducer to update the state. Dispatch takes an action and sends it to the appropriate reducer.

Redux uses the Flux architecture, where the state of the application is stored in a single structure called store. Any changes to the state must go through dispatch to execute the action, and reducers are used to handle actions and update the state.

Example

Here is a simple example of how to use Redux in a React application.

Installing Redux and React Redux:

npm install redux react-redux

Create the file actions.js to define actions:

// actions.js
export const increment = () => {
  return {
    type: 'INCREMENT',
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT',
  };
};

Create the file reducers.js to handle actions and update state:

// reducers.js
const initialState = {
  count: 0,
};

const counterReducer = (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;
  }
};

export default counterReducer;

Create a file store.js to create a store and connect it to the React application:

// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);

export default store;

Using Redux in React applications:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

In the example above, we use the useSelector hook to get the state from the store and the useDispatch hook to send actions to the reducer. When the user clicks the "Increment" or "Decrement" button, the corresponding action will be sent to the reducer and the state will be updated.