Advance React

Chapter - 4
What is Hook
What is Hook

useState

useRef

useEffect

Use Reducer

useCallback

** Refer W3School

https://www.w3schools.com/REACT/react_hooks.asp
Model - View - Controller
React Flux
● Flux is an application architecture that Facebook uses internally for building the
client-side web application with React. It is not a library nor a framework.
● It is a kind of architecture that complements React as view and follows the concept of
Unidirectional Data Flow model.
● It is useful when the project has dynamic data, and we need to keep the data updated in
an effective manner.
● It reduces the runtime errors.
Flux applications have three major roles in dealing with data:

1. Dispatcher
2. Stores
3. Views (React components)
Structure and Data Flow
Dispatcher
It is a central hub for the React Flux application and manages all data flow of your Flux
application.

It is a registry of callbacks into the stores. It has no real intelligence of its own, and simply
acts as a mechanism for distributing the actions to the stores.

All stores register itself and provide a callback. It is a place which handled all events that
modify the store.

When an action creator provides a new action to the dispatcher, all stores receive that action
via the callbacks in the registry.
Dispatcher
Stores

It primarily contains the application state and logic. It is similar to the model in a traditional
MVC. It is used for maintaining a particular state within the application, updates themselves
in response to an action, and emit the change event to alert the controller view.

Views

It is also called as controller-views. It is located at the top of the chain to store the logic to
generate actions and receive new data from the store. It is a React component listen to
change events and receives the data from the stores and re-render the application.

Actions

The dispatcher method allows us to trigger a dispatch to the store and include a payload of
data, which we call an action. It is an action creator or helper methods that pass the data to
the dispatcher.
Advantages of Flux
● It is a unidirectional data flow model which is easy to understand.
● It is open source and more of a design pattern than a formal framework like
MVC architecture.
● The flux application is easier to maintain.
● The flux application parts are decoupled.

** https://www.javatpoint.com/react-redux

**https://www.turing.com/blog/mvc-architechture-vs-flux-vs-redux/
React Redux

Redux is an open-source JavaScript library used to manage application state. React uses
Redux for building the user interface.

Redux was inspired by Flux. Redux studied the Flux architecture and omitted unnecessary
complexity.

● Redux does not have Dispatcher concept.

● React Redux is the official UI bindings for react Application. It is kept

STORE: A Store is a place where the entire state of your application lists. It manages the
status of the application and has a dispatch(action) function. It is like a brain responsible for
all moving parts in Redux.

ACTION: Action is sent or dispatched from the view which are payloads that can be read by
Reducers. It is a pure object created to store the information of the user's event. It includes
information such as type of action, time of occurrence, location of occurrence, its
coordinates, and which state it aims to change.

REDUCER: Reducer read the payloads from the actions and then updates the store via the
state accordingly. It is a pure function to return a new state from the initial state.
https://www.geeksforgeeks.org/redux-and-the-flux-architecture/
Bundling the Applications
WebPack
● Webpack is a static module bundler for modern JavaScript applications.
● When webpack processes your application, it internally builds a dependency
graph from one or more entry points.
● It then combines every module your project needs into one or more bundles,
which are static assets to serve your content from.
To get started you only need to understand its Core Concepts:

● Entry
● Output
● Loaders
● Plugins
● Mode
● Browser Compatibility

https://webpack.js.org/concepts/