Redux

The connect() function connects a React component to a Redux store.

What is the significance of immutability in Redux?

The significance of immutability in Redux lies in ensuring a predictable state and simplifying state
management. Using immutable states allows us to write code that can quickly tell if the state has
changed, without needing to do a recursive comparison on the data, which is usually much faster.

A pure function is defined as any function that doesn’t alter input data, doesn’t depend on the
external state, and can consistently provide the same output for the same input. As opposed to
React, Redux depends on such pure functions.

Key components of Redux architecture.

 Actions: Actions are a plain JavaScript object that contains information. Actions are the only
source of information for the store. Actions have a type field that tells what kind of action to
perform and all other fields contain information or data.

 Reducers: Reducers are the pure functions that take the current state and action and return
the new state and tell the store how to do.

 Store: The store is the object which holds the state of the application.

Redux toolkit is a npm package that is made to simplify the creation of redux store and provide easy
state management. Before the introduction of the Redux toolkit state management was complex in
simple redux. The Redux toolkit acts as a wrapper around redux and encapsulates its necessary
functions. Redux toolkit is flexible and provides a simple way to make a store for large applications.

REDUX STORE

Store is an object which provides the state of the application. This object is accessible with help of
the provider in the files of the project. The only way to change the state inside it is to dispatch an
action on it.

There are three important parts of the store:

 createStore(): To create a store object in redux.

 dispatch(action): To change the state of store data by using the actions.

 getState(): For getting the current state of the store in redux.

ACTION

Actions are JavaScript object that contains information. Actions are the only source of information
for the store. It basically carries a payload of information from the application to the store.

REDUCER

reducers are pure functions that handle state logic, accepting the initial state and action type to
update and return the state, facilitating changes in React view components.
PURPOSE OF PROVIDER IN REACT REDUX

The Provider component makes the Redux store available to any nested components that need to
access the Redux store.

REDUX MIDDLEWARE

Redux middleware is a piece of software that works between the action creators and the reducers in
a Redux application. It intercepts actions before they reach the reducers, and allows to perform
asynchronous operations, modify actions, or implement custom behavior.

ACTION CHAINING

Action chaining in Redux middleware refers to the process of dispatching multiple actions in
response to a single dispatched action. This technique is often used to handle complex sequences of
actions or to arrange multiple asynchronous operations.

There are several strategies for handling side-effects in Redux include using middleware like Redux
Thunk for asynchronous actions and Redux Saga for more complex scenarios. These tools manage
side-effects outside reducers.

1. Redux-Thunks: Thunks are functions that wrap an action creator and can perform
asynchronous logic before dispatching actions. They provide a way to handle side-effects in
Redux without introducing additional middleware.

2. Redux-Saga: Redux-Saga is a middleware library for handling side-effects in Redux

REDUX THUNK

The purpose of the redux-thunk middleware is to enable Redux to handle asynchronous logic more
easily, particularly when dealing with actions that don’t immediately return an object, but instead
return a function. Redux-thunk extends Redux functionality by allowing action creators to return
functions instead of plain action objects. These functions, known as thinks and have access to
the dispatch and getState functions of the Redux store.

Time-travel debugging in Redux lets you go back and forth through the history of actions in the
Redux store. It helps you understand how the application’s state changes over time and makes it
easier to pinpoint and fix bugs by replaying specific scenarios.

How can we access a redux store outside a react component?

To access the Redux store outside a React component, you need to import the store instance from
your Redux setup file. Then, you can use methods provided by Redux, such as [Link]() to
access the current state of the store, or [Link](action) to dispatch actions directly.

store = createStore(reducer);

export default store;

PURPOSE OF BROWSER ROUTER IN REACT ROUTER :

The purpose of BrowserRouter in React Router is to provide the routing functionality for web
applications by synchronizing the UI with the current URL in the browser’s address bar.
ROUTE

The Route component in React Router is a fundamental element used to define routes in React
applications, and helps in the rendering of specific components based on the current URL. It takes
props like “path” to specify the URL pattern. With Route, you can create dynamic and declarative
routing structures for efficient navigation and rendering of components.

RTK

Benefits of Redux Toolkit (RTK)

 Easier state management as compared to Redux

 Boilerplate code for the majority of functions

 Official recommended SOPE library

 Wrapper functions are provided which reduce lines of code

Important function provided by Redux Toolkit:

 The createStore function in basic Redux is wrapped by configureStore function which

 Classic reducer is replaced by createReducer function which makes the code shorter and
simpler to understand.

 The createAction() utility that returns an action creator function.

 Redux createSlice() function that comes in handy to replace create action and create
Reducer functions with a single function.

 Redux createAsyncThunk() that takes Redux strings as arguments and returns a Promise.

 Redux createEntityAdapter() utility that helps to perform CRUD operations.