What is Redux simple words?

I am 10 years use jQuery to me it is difficult to reach the architecture React with which I'm trying to understand.
Here for example I visit many independent blocks, I create them as widgets on yii, one widget can be nested in another and so on, you can call them components. It so happens that the action in one component affects another component, for example in one component clicked "Save" and the other component should be updated (perepisovatsya). I do so: press the button, I send ajax, on successful response, I am initiating event in this component $(document).trigger('widget_user#save'); But in other components which should react I listen to this event $(document).on('widget_user#save', function(){...}); So my components become independent, and all who are interested can subscribe to its events.
Redux is doing something similar? Please explain in simple words. And that is called as?
June 26th 19 at 14:05
11 answers
June 26th 19 at 14:07
Solution
The best explanation Redux I've ever seen.
getinstance.info/articles/react/learning-react-redux
ba494148d28e422b4c7bd269de5bed09.png
June 26th 19 at 14:09
To understand how the Redux rules you need to vkurivat React.
At least to not be afraid of props.

Have you React. It's all just JS objects.
<component></component> - so lets write the engine jsx, which React uses it.
As the structure component, you have to think how to update components in another part of the page.

The principle is this: if a component is updated when new properties - props or when changing its state object - state.

You update far apart the components you need to consider what and where properties are coming to the traverse function, which will cause a redraw.

Making Redux:
He does not call to abandon the state.

But there is a General data container. And when the data is changing - and changing components that display these data.

When you need to change something - cause a dispatch is a special feature of reducer reacts to it and changes the data as you need. When data is replaced by a component Propvider - causes the render from its child component (the one that wraps the Provider).
For example:
<provider>
 <mycomponent>//Here Provider icing (write) the new props.
</mycomponent></provider>


He writes that the global store and all the components for which changed data preresults.

mapStateToProps - specifies what part of this global repository will provide the provider.
If you have it is:
{
 chunkStore: {},
 some: {}
}

If mapStateToProps return{store: store.chunkStore}the Provider in the props of his descendant icing is: store: store.chunkStore. And you're going to go in to the store, but there will be only a part of the chunkStore (not the whole object, and its field).

mapDispatchToProps - because subscribe not, it returns functions that can inside to call dispatch().

action - describes what you want to change. What field and what data to put inside.
June 26th 19 at 14:11
In this case, a different way of thinking (design).

In your case:
Logic comes from the components.
Let's say on the user page there is a label online/offline
Where to get the value if you want to lock the chat window at the moment when the user is offline?
If such action not one, and let's say 10 pieces?
If such action not one, and let's say 10 pieces and are still on different pages?
Where to make a function that will check the user status?
How to call to avoid name conflict?

Redux for me in the first place approach.
1. Designed state of the database (front)
{user:{online:false}}
2. action checkUserStatus (ajax/socket)

3. any number of components (which do not know anything about each other and have any behavior, depending on the user status)
components can nothing except to be able to render the status (label), or can be more complex and have logic + handlers (buttons, etc)
and redux is Compatible with vue2? For example, if the backend to do on laravel, and the front for vue2, you need a Redux ? - Miracl commented on June 26th 19 at 14:14
: Redux is just a library, not built for React. There is a connecting link library React-Redux. - britney38 commented on June 26th 19 at 14:17
: to have Vue Vuex - mya.Hilpert58 commented on June 26th 19 at 14:20
: it is very good that you told me ) - Miracl commented on June 26th 19 at 14:23
Unless this is not in the documentation? - nova_Wehn commented on June 26th 19 at 14:26
And you take orders via JS ? - carlie_Crist commented on June 26th 19 at 14:29
June 26th 19 at 14:13
jQuery "sees" the whole DOM in its entirety. And manipulating the DOM-om, which provides browser. But there is another way.

Let's consider such an architecture in which all components are interlinked tree. That is, a particular component can communicate with its subsidiaries and with its parent. If you need to communicated between two components in different branches, that in the end their communication is through a common ancestor. This approach is consistent with the tree structure of the HTML.

Then we separate state from behavior and presentation. The condition can be described by a static data structure, JSON-ohms, for example. And the behavior is a pure function from a previous state and a certain event (action) making the next state. The idea also knows how to visualize the condition. This principle can reproduce from the smallest component (without child) in the tree to the root. Then the entire application lifecycle can be represented as a chain of States from some initial to current, driven by events (actions).

In order for this to display, not necessarily during the computation of the next state (or view) directly manipulate the DOM ohms. You can build out of state and submission to a fragment of the DOM and how it should be. And then calculate the diff between this constructed fragment (virtual DOM ω) and a real browser. And apply this diff to the actual Domu. Once. Succeed quickly.

As far as I know (correct me if not), Redux adapted from Elm as well. Elm is an ecosystem and functional language, which compiles to JS, is made to ensure that the frontend can be developed conveniently, quickly and without runtime errors. Syntax is an adaptation of the Haskell-a. A key element of the Elm is just that this is the architecture. Suggest to read the primary source. https://guide.elm-lang.org/architecture/

In addition to these features, this architecture also allows to perform so-called time-travelling debugging. Because each state and each event along the path from the source to the current can be salaryrate and play (because the function that computes the next state we have clean).

From the point of view of functional programming, in this approach, the current state is the result of the function leftFold applied to the initial state of the sequence of events (actions) that lead to current and functions, able to calculate the next state.
June 26th 19 at 14:15
Redux is the ultimate machine. He has some condition (state) that is stored in the store. You can change, passing (dispatch) this machine for a message (the action). A state change is handled by a special function — reducer. It takes the initial state and action and returns the new state.

Action looks like this:
{ type: 'MY_COOL_ACTION', payload: { a: 1, b: 2, c: 3 } }


Reducer as follows:
function reducer(state, action) {
 switch (action.type) {
 case 'MY_COOL_ACTION':
 return Object.assign({}, state, {
 x: state.x + action.payload.a - the action.payload.b
 y: state.y + action.payload.c
});

default:
 // default state
 return {
 x: 0,
 y: 0,
 z: 0
};
}
}
June 26th 19 at 14:17
redux is a way of working with data sets in which you can do with these data in the form of actions and response and modify the data on these actions (reducers - converters).

So passing in reducer(Converter) current state of the data and action(action) you get a new data state. It turns out that data doesn't happen anything unexpected, what you did not expect. So to say all the moves are recorded).
And Yes, forget about react. Redux separately, React separately. Redux - the data React - representation. - Miracl commented on June 26th 19 at 14:20
June 26th 19 at 14:19
jQuery is the principle events and modifying the DOM, and the preservation of the state - is a secondary matter
Typical mechanism: something happened (click/scroll) -> to change something in the DOM, perhaps something to remember in JS

React is the principle of the state, and changing the DOM or event - a secondary matter
Perhaps the event occurred -> update special object (called model)
Something has changed in the model -> maybe to update the DOM when the model something to do with HTML
June 26th 19 at 14:21
June 26th 19 at 14:23
Redux is not the best implementation of the Observer pattern.
You can give an example the best? - Miracl commented on June 26th 19 at 14:26
In mobx made more interesting, but there are mutable. - britney38 commented on June 26th 19 at 14:29
June 26th 19 at 14:25
Redux assumes that all the status of your application is stored in one place (store) and the only way to change this state is to display the old state to the new with a special function of reducer. This function has the signature (action, old_state) => new_state, where action can be understood as a "recipe" of your actions, such as "add user to database".

Rendering components in react does not know clearly about redux, for it is only important that there was a state change in one way or another, to which he should respond to the update component in accordance with the internal logic.
June 26th 19 at 14:27
Redux - a state Manager that can see all the components. In fact, you can make a bunch of isolated States and, accordingly, to them - an independent type of changes (mutations). Further to the conditions and mutations rentaroom actions and components depending on events used these actions.
For me it is something like the mvc model in the frontend. Model state, controller actions and view function calls the actions in the template components.

Find more questions by tags JavaScriptReactFluxRedux