Redux

1. What is Redux?

Redux is a state management library for JavaScript applications. It helps manage the state of an application in a predictable way using a single store. Redux follows a unidirectional data flow and relies on actions, reducers, and a store to handle state changes.

• Core Concepts:
  • Store: Holds the application state.
  • Actions: Payloads of information that send data from the application to the store.
  • Reducers: Functions that specify how the state changes in response to actions.
  • Dispatch: The method used to send actions to the store.

2. What is React-Redux and Redux Toolkit?

React-Redux is the official React binding for Redux. It provides hooks (useSelector, useDispatch) and higher-order components (connect) to connect React components with the Redux store.

• Key Features:

  • Provider: Makes the Redux store available to the React component tree.
  • connect: Connects React components to the Redux store.
  • useSelector: Accesses the Redux store state in a functional component.
  • useDispatch: Dispatches actions to the Redux store.

Redux Toolkit is a set of tools and best practices for efficient Redux development. It simplifies the process of writing Redux logic by providing utilities like createSlice, configureStore, and createAsyncThunk.

• Key Features:
  • createSlice: Generates action creators and reducers for a slice of the Redux state.
  • configureStore: Sets up the Redux store with sensible defaults.
  • createAsyncThunk: Handles asynchronous logic in Redux.

3. Redux Jargons

• Store: The central repository of the application’s state. It holds the entire state tree of the app.
• Slice: A slice of the Redux state managed by a reducer and associated actions. Created using createSlice.
• Reducer: A function that takes the current state and an action, and returns a new state.
• Dispatch: A method used to send actions to the Redux store to trigger a state change.
• Action: A plain JavaScript object that describes an event that has occurred. Actions have a type and can include other data.
• Selector: A function that extracts and returns specific parts of the state from the Redux store.

4. Task :

• Build a Store: Set up a Redux store using configureStore from Redux Toolkit.

  import { configureStore } from "@reduxjs/toolkit";
  import rootReducer from "./rootReducer";
  
  const store = configureStore({
    reducer: rootReducer,
  });
  
  export default store;
  

• Connect Store to Your App: Use the Provider component from react-redux to make the store available to your React components.

  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")
  );
  

• Create a Slice: Define a slice using createSlice.

  import { createSlice } from "@reduxjs/toolkit";
  
  const counterSlice = createSlice({
    name: "counter",
    initialState: { value: 0 },
    reducers: {
      increment: (state) => {
        state.value += 1;
      },
      decrement: (state) => {
        state.value -= 1;
      },
    },
  });
  
  export const { increment, decrement } = counterSlice.actions;
  export default counterSlice.reducer;
  

• Dispatch an Action: Use useDispatch to dispatch actions from a React component.

  import React from "react";
  import { useDispatch, useSelector } from "react-redux";
  import { increment, decrement } from "./counterSlice";
  
  function Counter() {
    const dispatch = useDispatch();
    const count = useSelector((state) => state.counter.value);
  
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={() => dispatch(increment())}>Increment</button>
        <button onClick={() => dispatch(decrement())}>Decrement</button>
      </div>
    );
  }
  
  export default Counter;
  

5. What is Mutating a State?

Directly modifying the state object rather than returning a new copy of the state with the changes. In Redux, you should avoid mutating the state directly because it can lead to unexpected behavior and make it difficult to track changes.

Example: Directly changing a state array using push is mutation. Instead, you should use methods like concat or spread operators to create a new array.

6. What is Subscribing to a Store?

Setting up a listener that gets notified whenever the state in the Redux store changes. This is useful for triggering updates in your components or other parts of your application in response to state changes.

Example: You can use store.subscribe to set up such listeners, but in React with react-redux, this is typically handled by useSelector.