❖ Explain Redux architecture
Redux is a predictable state management library often used with JavaScript frameworks like
React. It helps manage the state of an application in a way that's consistent, debuggable, and
testable. Redux architecture is based on several key concepts: Store, Actions, Reducers, and
Middleware. Here’s a breakdown:
1. Store
The store is a centralized location that holds the entire state of your application. Instead of
having multiple states scattered across various components, the store serves as a single source
of truth. Only one store exists per Redux application, and it contains the whole state tree.
2. Actions
Actions are plain JavaScript objects that describe what happened in the application. Each
action must have a type property, typically a string constant, that indicates the type of action.
Actions can also contain additional data in a payload, representing any information needed to
update the state. Actions are the only way to send data to the store.
Example of an action-
3. Reducers
Reducers are pure functions that take the current state and an action as arguments, then return
a new state based on the action type. Reducers describe how the state should change in
response to an action. Since they are pure functions, they don’t modify the existing state but
return a new one, ensuring that the Redux state is immutable.
Example of a reducer:
4. Dispatch
To update the state, Redux uses dispatch. When an action is dispatched, Redux calls the
relevant reducer(s) and updates the store based on the new state returned by the reducers.
Example of dispatch:
5. Middleware (Optional)
Middleware provides a way to enhance Redux with custom functionality, often handling
asynchronous logic like API calls. Redux middleware, such as Redux Thunk or Redux Saga,
allows actions to be dispatched asynchronously, which is useful for complex applications.
Redux Data Flow
1. User Interaction: A user interacts with the app (e.g., clicking a button).
2. Action Dispatch: An action is dispatched to describe the change in state.
3. Reducer Processing: The action is sent to the reducer, which calculates the new state.
4. Store Update: The store updates with the new state.
5. UI Update: Components subscribed to the store re-render to reflect the new state.
Example Flow
Suppose we have a shopping cart application:
1. The user clicks "Add to Cart" for an item.
2. An action like { type: "ADD_ITEM", payload: item } is dispatched.
3. The reducer listens for "ADD_ITEM" and updates the state by adding the new item.
4. The store holds the updated state, and subscribed components re-render to show the
item in the cart.
Summary
Redux’s architecture follows a one-way data flow, meaning that the state is always updated in
a predictable way. This simplicity makes Redux popular in complex applications, where
managing state across many components could otherwise become unwieldy.
❖ What is web Pack
Webpack is a module bundler for JavaScript applications. It bundles various assets like
JavaScript, CSS, and images into optimized files. Its core features include:
1. Entry: The starting point of your application (e.g., index.js).
2. Output: Where Webpack saves the bundled files (e.g., bundle.js).
3. Loaders: Transform files (e.g., converting JSX to JavaScript or SCSS to CSS).
4. Plugins: Extend functionality for tasks like minification, code splitting, or HTML
generation.
5. Development Server: Provides live reloading and faster feedback during development.
6. Modes: development (faster builds, debugging) and production (optimized for
performance).
Webpack helps manage and optimize the dependencies in your project for both development
and production environments.
