React + Redux how to get started right?

Question

JavaScript

Good evening! I set myself the task of doing something on React + Redux.
And here I am stuck with this Redux.
Please explain how you start your work with all this?
The first is installing all the libraries and setting them up (React / Redux / webpack ... )
Next, I want to write components to see the whole picture, but in all writing examples, it starts with action, reducer, store and at the end of the component.
How to work with it, so as not to go crazy?
I took this tutorial as a basis , maybe there is a better one?
For example, the task is to write a simple form...
The first problem is how to accept the data? Is there any working example of ajax?
As far as I understand, we receive data in action ... then we pass it to the reducer, then to the store?
For example, on the onchange of a select, I need to take data from it, read something and output it to some input ... what is the chain of actions here, and most importantly in which files?
Sorry for so many questions...any help would be appreciated!

Answer 1

How to work with it, so as not to go crazy?

Take your time if you want to think carefully =)
Use react lifecycle hooks: at componentDidMount (or at componentWillMount ) call actionCreator (AC = action creator) -> in AC you fire a REQUEST event (which your reducer catches) and then make an "ajax request", let's say. In case of a successful result, you generate a SUCCESS event and your reducer sets the data. Next, your form component sees that there are new "props" (properties that have changed in the reducer that the component has learned about since it's connected with the "connect" function from the react-redux library) and starts a rerender. Voila, after so many actions, your form "accepted data".
Of course, if you just make a native xhr request, there will be much less code and everything in one file, but this should already be based on your wishes. If you need the data to be "driven" through the reducer and end up in the store, that means "many actions". If not needed, just a normal xhr request, or if you like $.ajax and setting the data in the state of the component.
If redux is used, then the chain is as follows: onChange of the select, a handler is called, that is, a function in your component that calls AC (the action creator, which is located in the actions folder). Next, the request goes to the server. Then a successful response comes from the server - you fire an event like "DATA_RESPONSE_SUCCESS" and your reducer "catches" it. So, you end up in the third file - the file with the reducer. There you manipulate the data, because along with the event type, you also had to transfer from the action the data that came from the server. After you set the new data in the reducer, the magic begins (which is that your component listens for changes in the store object using the connect function). Your component is re-rendered and the required data is in the input,
Total: you touched the component file, the file from the actions folder and the file from the reducers folder.
1) you need to understand how to make a form without redux. How to set and change data in it using this.state and life cycle methods depending on what the user has selected / entered. It is not difficult to do this if you start with a tutorial on the official page, or look at the RU tutorial here.
2) you need to understand why asynchronous requests are located in actions, and how redux-thunk works (as well as middlewares in general). Why reducers only change data. And most importantly, why the component is redrawn at the same time. Again, links to official manuals have already been given. The Russian translation is not finished there, therefore, although the versions of the libraries are outdated, this redux tutorial is still relevant .
PS in the tutorials there are examples with code

Answer 2

Pretty good stuff, start with this...

Answer 3

Free courses from creator Dan Abramov
https://egghead.io/technologies/react