Why use Context API when we can use a static variable? - react-native

I am getting start to study Context API of the React Native.
I understand that the Context API is to solve the problem to send a lot of props in the parameters.
It seems to me as a global variable.
In this case, to use a static variable of a class in JS don't fix the problem of a variable global?
Why use Context API when we can use a static variable?
What are better in Context API?
Are others API that use Context API in React Native as pre-requisite?

In my experience you can do exactly as you're describing...
You'd set a static property App.instance = this in App's constructor.
Your App class has static methods which can access App.instance.state and App.instance.setState().
I'm curious why this approach isn't mentioned anywhere. Possibly because you can't use static properties in functional components, so it's a bit unfashionable. And it feels like it goes against react's component tree structure.
There is also the general feeling that statics are evil.

Related

Customize parsing in react-navigation params

I'm using react-navigation with react-native.
I know that I can customize how JSON.stringify serializes my class into JSON. I am doing this because some of the properties of my class are Dayjs objects from day.js which give the non-serializable warning in Expo Go.
I need to be able to handle the JSON.parse side of that. I realize that JSON.parse uses a reviver function, but is there any way that I can provide such a function to react-native when it parses my params?
I'm really not sure why react-navigate can't (or doesn't) store these objects in memory. Why the serialization?
This can happen if you are passing non-serializable values such as class instances, functions etc. in params. React Navigation warns you in this case because this can break other functionality such state persistence, deep linking, etc.
In the official documentation, they said that the params you pass are JSON-serializable. That way, you'll be able to use state persistence and your screen components will have the right contract for implementing deep linking.
You can refer this: https://reactnavigation.org/docs/troubleshooting/#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state

Inject IOptionsSnapshot in Block constructor

I created a new custom Block and wanted to inject an IOptionsSnapshot to read my appsettings.json values. The problem is that I get an error saying there is no parameterless constructor for my custom block.
Is there a way to somehow do this injection or is this a limitation in Piranha and custom blocks.
At the moment neither Fields nor Blocks supports parameter injection into the constructor, however Fields have two initialization methods that both support parameter injection, Init() and InitManager(). Given how models are constructed the easiest solution would probably be to add the corresponding init methods to Blocks as well.
Feel free to open an issue/feature request at the GitHub repo and we can take the discussion from there!

How to test Stencil.js state change?

I'm trying to figure out how to test state change in a Stencil web component using jest. I'm new to testing in general and have found that you can you use Enzyme to test state change within React components but I haven't been able to figure out how to do it with a Stencil component. How would I go about doing this?
Generally, you are not recommended to test the internal logic of component (state) but test public API(props, events) instead.
But if you wish to test it anyway, I suggest you check Testing documentation on stencils original website. If by testing a component you mean test it by instantiating a component explicitly then it means you are going to test an instance of plain javascript class. So if your state variable marked as private (which is a best practice) then you will not able to compile it, since TS will throw compilation errors. So, as an option (and the only as I see now) you can make those state members public and check them in your expects().

What is the Vuex "context" object?

I am trying to get better understanding of what the "context" object is in Vuex.
The context object is referred to numerous times in the Vuex documentation. For example, in https://vuex.vuejs.org/en/actions.html, we have:
Action handlers receive a context object which exposes the same set of
methods/properties on the store instance, so you can call
context.commit to commit a mutation...
I understand how to use it, and also that we can use destructuring if we only want to use the "commit" from the context object, but was hoping for a little more depth, just so I can better understand what is going on.
As a start, I found a couple ~8.5 year old posts on the "context object" as a pattern:
what is context object design pattern? and
Can you explain the Context design pattern?
However, specifically to Vuex, I'd love a better understanding of:
What is the context object / what is its purpose?
What are all the properties/methods that it is making available to use in Vuex?
Thank you!
From the documentation you pointed out you can read:
We will see why this context object is not the store instance itself when we introduce Modules later.
The main idea of the context object is to abstract the scope of the current Module. If you simply access store.state, it will always be the root state.
The context object of actions and its properties/methods are described here in the source code and also referenced in the API documentation
Here is the list:
{
state, // same as store.state, or local state if in modules
rootState, // same as store.state, only in modules
commit, // same as store.commit
dispatch, // same as store.dispatch
getters, // same as store.getters, or local getters if in modules
rootGetters // same as store.getters, only in modules
}
As a start, I found a couple ~8.5 year old posts on the "context object" as a pattern ...
I think you're reading into it too much.
I don't think the Vuex docs is referring to some specific kind of "context object" that is known and defined elsewhere, they just mean that the object that is passed to action handlers (and in other situations as described in the docs) is a custom object which they refer to as a "context" object by their own definition.
The reason why they provide this object is because it contains properties that are specific to the module for that particular action handler.
according to the source code of vuex, context is just a literal object with some properties from local, and other properties from store.

How move controllers in subfolders

i'm using play framework 2.1 and i got a strange error.
I'm trying to move controllers in subfolders, es:
controllers->
- Application.java
- pages ->
- - - -Index.java
- - - -Second.java
and in routes i have:
GET / controllers.pages.Index.main();
error:
value main is not a member of object controllers.pages.Index
It's a bug? regards Nicola
SOLVED
bug found: you cannot access to methods of parent class, you have to override them:
public static Result main(String page, String method)
{
return ParentClass.main(page,method);
}
I don't think it was fixed in final Play 2.1 (or I missed something) - the route to method which is not 'overriden' in child class still returns error.
AFAIK in Java real overriding of static methods isn't possible at all.
Anyway... remember that all actions by design are a static methods so, you don't need to use the route to Child.methodOfParent() while you can just use Parent.methodOfParent(), something you are showing as a solution should be rather considered as overloading instead of overriding.
On the other hand, from my point of view I'd rather suggest to do not use this pattern at all. Play's actions should be separate methods which does its job independently from other actions, and if you need to use the (almost) same functionality in both actions probably it would be better concept to use other static method (not an action) ie. in new utils package to process body of both actions with params. IMHO it will be just safer approach, as you can see - there are still some 'unknowns'.