What is Redux Toolkit? Why should we use it?

Redux Toolkit is a set of tools that simplifies Redux development. It is the standard way recommended by the Redux team to write Redux logic in modern applications.

It includes utilities for creating and managing stores, and for writing actions and reducers with less boilerplate. You can say Redux Toolkit is an upgraded and simplified version of Redux.

Redux Toolkit manages the data flow similar to Redux but in a simpler way:

1. State is stored in a central store
2. Components use useSelector to read state
3. Actions are dispatched using useDispatch
4. Reducers update the state inside slices

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './reduxToolkit/counterSlice';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
  const myState = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();
  
  return (
    <div className="mt-5">
      <h1>Welcome To React Redux</h1>
      <input type="text" value={myState} className="form-control w-50 mb-3" readOnly />
      <button className="btn btn-primary me-2" onClick={() => dispatch(increment())}>Add</button>
      <button className="btn btn-danger" onClick={() => dispatch(decrement())}>Minus</button>
    </div>
  );
};

export default App;