React with Redux? How about a "context" problem?

Question

I usually post code-related stuff to Stack, but this is more a question of what the general thoughts of the community are.

It seems like many people advocate using Redux with React to manage data / state, but while reading and studying, I came across something that doesn't quite look right.

Redux

At the bottom of this page: http://redux.js.org/docs/basics/UsageWithReact.html (Store Walkthrough), it is recommended to use the "Magic" of the "React" context.

One option is to pass it as a support for each component of the container. However, this becomes tedious because you have to route even through presentation components just because they render the container deep in the component tree.

We recommend using the special React Redux component, which is designed to magically make the storage available for all components of the container ...

To react

On the Reaction Context page ( https://facebook.imtqy.com/react/docs/context.html ) at the top of the screen there is a warning:

Context is an advanced and experimental feature. The API is likely to change in future releases.

Then below:

Just as global variables are best avoided when writing clear code, you should avoid using context in most cases ...

Do not use context to pass model data through components. The flow of your data through the tree is clearly much easier to understand ...

So...

Redux recommends using the "Context" function, rather than passing the store along each component through the "props". Although React recommends the opposite.

Also, it looks like Dan Abramov (creator of Redux) is now working on Facebook (creator of React), just to confuse me more.

• Am I reading all this correctly ..?
• What is the general current consensus on this ??

Answer 1

Context is an advanced feature and is subject to change. In some cases, its convenience outweighs its flaws, so some libraries, such as React Redux and React Router, prefer to rely on it, despite the experimental nature.

The important part here is the word library. If the context changes its behavior, we, as the authors of the library, will have to adapt. However, while the library does not ask you to directly use the context API, you, because the user does not need to worry about changes in it.

React Redux uses context inside, but it does not reveal this fact in the public API. Thus, you should feel much safer using the context with React Redux than directly, because if it changes, the burden of updating the code will be on React Redux, not on you.

Ultimately, React Redux still always supports the transfer of storage as a prop, so if you want to completely avoid the context, you have this choice. However, I would say that this is impractical.

TL; DR: Avoid using context directly unless you really know what you are doing. Using a library that relies on an internal context is relatively safe.

Answer 2

I do not know about others, but I prefer to use the link-redux decorator-decoder to transfer my components, so that only the props from the store I needed are transferred to my component. This justifies the use of context in a certain sense because I do not consume it (and I know, as a rule, any code that I head will not consume it).

When I test my components, I test a non-integrated component. Since response-redux only passed the props that I need for this component, now I know exactly what details I need when I write tests.

I believe that the fact is that I never see the context of a word in my code, I do not consume it, so to a certain extent it does not affect me! This says nothing about Facebook’s “experimental” warning. If the context disappeared, I would be plunged just like everyone else until Redux is updated.