You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+47-7Lines changed: 47 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -2994,17 +2994,36 @@ class ParentComponent extends React.Component {
2994
2994
2995
2995
102. ### What is flux?
2996
2996
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.
2998
2998
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.
3000
3000
3001
-

3001
+
#### Core Concepts of Flux
3002
3002
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).
* 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
+

3004
3022
3005
-
103. ### What is Redux?
3023
+
**[⬆ Back to Top](#table-of-contents)**
3006
3024
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.
3008
3027
3009
3028
**[⬆ Back to Top](#table-of-contents)**
3010
3029
@@ -3013,8 +3032,29 @@ class ParentComponent extends React.Component {
3013
3032
Redux follows three fundamental principles:
3014
3033
3015
3034
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
+
conststore=createStore(reducer);
3038
+
```
3016
3039
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
+
constaction= { 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.
0 commit comments