Redux:
Redux is a state management tool that makes it easier to pass
data between components. Redux provides a store which
makes the state inside components easier to maintain. Along
with stores, react-redux introduces actions and reducers
which work simultaneously with stores to make the state
more predictable.
Redux is a state management library that facilitates the
management of the state of an application in a predictable and
centralized manner. It operates on a unidirectional data flow,
making it easier to debug and understand how data changes in
an application over time.
1. Store: The store holds the global state of the application. It
is a single JavaScript object that represents the entire state.
2. Actions: Actions are payloads of information that describe
a change in the application’s state. They are plain
JavaScript objects containing a type property.
3. Reducers: Reducers specify how the application’s state
changes in response to actions. They are pure functions that
take the current state and an action, returning the new state.
4. Dispatch: Dispatch is the process of sending an action to
the store. It is the only way to update the state.
5. Selectors: Selectors are functions used to extract specific
pieces of data from the state.
Redux ToolKit(RTK):
Redux Toolkit is used for writing redux code but in a more
concise way. Redux Toolkit (RTK) solves problems that
most of the developer’s face who used redux in a react
application. RTK abstracts the basic redux code and provides
us boilerplates that enable us to write redux code in less lines
of code
Redux is powerful, but setting it up and writing boilerplate
code for actions and reducers can be time-consuming. Redux
Toolkit is a set of utilities, including a standardized way to
write reducers, create actions, and configure the Redux store.
It is designed to simplify the development process and
promote best practices.
1. createSlice: A function that generates both reducers and
actions based on a slice of the Redux state.
2. configureStore: A function to configure a Redux store
with additional middleware and other enhancements.
3. createAsyncThunk: A utility for handling asynchronous
actions, simplifying the process of managing async logic.
4. createEntityAdapter: A set of utilities for managing
normalized state structures, commonly used for entity-
based data.
Issues with basic Redux:
Configuring a Redux store is too complicated
Have to add a lot of packages to build a large-scale
application.
Redux requires too much boilerplate code which makes it
compact to write efficient and clean code.
To install RTK(Redux ToolKit) in the existing project use
the command
# NPM
npm install @reduxjs/toolkit
# Yarn
yarn add @reduxjs/toolkit
To create a new project with RTK use the command:
npx create-react-app my-app --template redux
Important features provided with RTK:
Automatic support for Redux-thunk, Redux DevTools
Extension, and default middleware is provided
by configureStore() function
Support for the immer library that allows writing the
immutable code mutably is provided
by createReducer() utility.
create action and create Reducer functions are replaced
with a single function called createSlice() function.
createAsyncThunk() that takes Redux strings as
arguments and returns a Promise.
CRUD operations are performed
using createEntityAdapter() utility.
