Skip to content

Commit 2b9f8d5

Browse files
committed
Add redux questions
1 parent b6a8ff2 commit 2b9f8d5

File tree

1 file changed

+47
-7
lines changed

1 file changed

+47
-7
lines changed

README.md

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2994,17 +2994,36 @@ class ParentComponent extends React.Component {
29942994
29952995
102. ### What is flux?
29962996
2997-
_Flux_ is an _application design paradigm_ used as a replacement for the more traditional MVC pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook uses this pattern internally when working with React.
2997+
**Flux** is an **application architecture** (not a framework or library) designed by Facebook to manage **data flow** in React applications. It was created as an alternative to the traditional **MVC (Model-View-Controller)** pattern, and it emphasizes a **unidirectional data flow** to make state changes more predictable and easier to debug.
29982998
2999-
The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows:
2999+
Flux complements React by organizing the way data moves through your application, especially in large-scale or complex projects.
30003000
3001-
![flux](images/flux.png)
3001+
#### Core Concepts of Flux
30023002
3003-
**[⬆ Back to Top](#table-of-contents)**
3003+
Flux operates using **four key components**, each with a specific responsibility:
3004+
* **Actions**
3005+
* Plain JavaScript objects or functions that describe _what happened_ (e.g., user interactions or API responses).
3006+
* Example: `{ type: 'ADD_TODO', payload: 'Buy milk' }`
3007+
* **Dispatcher**
3008+
* A central hub that receives actions and **dispatches** them to the appropriate stores.
3009+
* There is **only one dispatcher** in a Flux application.
3010+
* **Stores**
3011+
* Hold the **application state** and business logic.
3012+
* Respond to actions from the dispatcher and update themselves accordingly.
3013+
* They **emit change events** that views can listen to.
3014+
* **Views (React Components)**
3015+
* Subscribe to stores and **re-render** when the data changes.
3016+
* They can also trigger new actions (e.g., on user input).
3017+
3018+
3019+
The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows:
3020+
3021+
![flux](images/flux.png)
30043022
3005-
103. ### What is Redux?
3023+
**[⬆ Back to Top](#table-of-contents)**
30063024
3007-
_Redux_ is a predictable state container for JavaScript apps based on the _Flux design pattern_. Redux can be used together with React, or with any other view library. It is tiny (about 2kB) and has no dependencies.
3025+
103. ### What is Redux?
3026+
Redux is a predictable state container for JavaScript applications, most commonly used with React. It helps you manage and centralize your application’s state in a single source of truth, enabling easier debugging, testing, and maintenance—especially in large or complex applications. Redux core is tiny library(about 2.5kB gzipped) and has no dependencies.
30083027
30093028
**[⬆ Back to Top](#table-of-contents)**
30103029
@@ -3013,8 +3032,29 @@ class ParentComponent extends React.Component {
30133032
Redux follows three fundamental principles:
30143033
30153034
1. **Single source of truth:** The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
3035+
3036+
```jsx
3037+
const store = createStore(reducer);
3038+
```
30163039
2. **State is read-only:** The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state.
3017-
3. **Changes are made with pure functions:** To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.
3040+
```js
3041+
const action = { type: 'INCREMENT' };
3042+
store.dispatch(action);
3043+
```
3044+
3. **Changes are made with pure functions(Reducers):** To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.
3045+
3046+
```jsx
3047+
function counter(state = 0, action) {
3048+
switch (action.type) {
3049+
case 'INCREMENT':
3050+
return state + 1;
3051+
case 'DECREMENT':
3052+
return state - 1;
3053+
default:
3054+
return state;
3055+
}
3056+
}
3057+
```
30183058
30193059
**[⬆ Back to Top](#table-of-contents)**
30203060

0 commit comments

Comments
 (0)