The react-router text tutorial, as well as react-router + redux. In Russian

Good day everyone. A little delayed, but still comes the third mini-tutorial . This time, the react-router is parsed . As well as two chapters on the integration of react-router + redux .

During the integration of rr + redux, I did not use react-router-redux and redux-router . As stated in the book itself, due to the active development of libraries, I would like to “teach you to fish,” and not just “give fish”.

Also, the above integration method is based on personal experience, plus the developer’s responses to redux ( his twitter ) on SO, and studying various repositories. He is not the "only true." Please provide links to your repositories, or suggest your options in the comments.

Go!

React-router

The library does not need advertising. Powerful nesting capabilities and, in principle, a good high-level abstraction.

The material is based on official tutorials ( one , two ), as well as several blogs (for example, James K Nelson's blog ).

We also tried to tweet writing “ unofficial documentation ”, but so far the progress was completely verse.

React-router + redux

Many (like me) are waiting for this section in the redux official documentation. But until that happens, the “redux philosophy” + bits of information scattered across the network comes to the rescue.

What do I mean by “redux philosophy”?

Firstly : routing is “actions”.

Secondly : we cannot simply take and use browserHistory.push inside already existing actionCreators (functions that create actions). Why? Because it is a side effect .

The idea of ​​using middlewares (spacer functions) comes to the rescue. For example, I want to use a primitive version:

If action.redirect is -> browserHistory.push (nextUrl) *

This response violates the agreement that middleware must return next ().

* I mention browserHistory a second time. This is due to the fact that these methods (push, replace, etc.) are available by default when you connect to the project react-router.

In search of an answer to a question, I looked deeper into the redux-router code. I wanted to achieve the following goal: to be able to call routing using redux native - store.dispatch

In this way, we preserve “philosophy”. The entire process of "data flow" in the application is clearly controlled by us.

In the tutorial, the banal task is disassembled:

If the user has entered a login - redirect him to /admin , if the user is not logged in and tries to log in /admin - drag him to the registration form ( /login ).

To successfully solve this problem, I used the code react-redux-jwt-auth-example . Excellent demonstration of the powerful "component wrapping" technique.

The solution to this problem is the key to understanding the process of invoking actions related to routing, since all the tasks of the “opera” redux + routing are as follows: a response (success, failure ...) is received - send ( dispatch ) the routing event .

Question to habrazhiteli:

What do you think, is it necessary to make a separate article to describe the react-router + redux integration process (in fact, this section “Connect redux” from the textbook. Is it short)? For what? Perhaps, other developers who have been working with such a bundle for a long time will see the approach and the code immediately in the article, and therefore will comment.

At the bottom of the survey.

Interesting questions on SO:

Keep everything in the store

Redux action async

How to connect to the redux store from react-router onEnter hook?

Some statistics (on 04/25/2016):

React.js for beginners : 59,481 views, 8,245 visitors, 3,843 downloads in pdf / epub / mobi format.

Redux Tutorial in Russian : 66,978 views, 7,942 visitors, 2,832 downloads.

For both courses - 41 + 38 "discussions". These are mostly grammatical errors. There are also a couple of practical comments ( on Habré ).

I want to thank everyone for your participation and interest. Still in touch: twitter , mail - maxfarseer@gmail.com

PS cover author zirael_m@mail.ru (Maria, freelance profile )