I am coming from redux and would like to change to the ignite boilerplate.
I have a boilerplate specific question: How do I initiliaze a store with an initialstate in Mobx?
I know how it conceptually works with creating an instance, but can't see a way to integrate it into the boilerplate. All I can see is the 'rehydration' from a saved state
Thanks a lot for your help!
https://github.com/infinitered/ignite/tree/master/boilerplate/app/models
#Tholle did a good job of answering this. If I could turn his comment into an answer, I would.
Ignite will initialize the rootStore instance with what is stored in AsyncStorage. You could e.g. modify the setupRootStore function to take in an optional initial state.
https://github.com/infinitered/ignite/blob/8b6ae0bc096d2d6d5d19e3151ada66455915b104/boilerplate/app/models/root-store/setup-root-store.ts#L27-L55
Related
I'm trying to write SSR-friendly code, keeping in mind a potential migration of my app from SPA to SSR. One of the principles of such code is to avoid statefull singletons which can cause cross request state pollution
The problem comes when I need to use an instance of Vuex, Vue-router, Vue-i18n etc. outside of Vue component. Because the solution in all the respective SO answers is... You guessed it. To create and export a statefull singleton in a separate js file and then import it all over the app:
Vue-router: https://stackoverflow.com/a/43562210/11208064
Vuex: https://stackoverflow.com/a/47575742/11208064
Vue-i18n: https://stackoverflow.com/a/66695008/11208064
A simple example
// store.js
export default new Vuex.Store() {} // this is a singleton
// someOtherModule.js
import { store } from './store.js'
Pinia has covered the issue in the docs. They recommend to access the pinia instance via app.$pinia. However they don't specify how do I access the app instance itself.
Also the problem is not limited to these libraries. We write our own modules which work in a similar manner.
Researching the issue I came across this article. It suggests to wipe module cache, so each time you require it all the code is executed again, making it fresh and stateless. Sounds pretty sophisticated, but maybe this is the way? And if not, what is the recommended solution?
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
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.
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().
Overview:
I refactoring script tests before I was used Enzyme to test, but now, I want to use #testing-library/react
Problem:
I can't find a solution for setState in #testing-library/react
Using setState is dangerous approach regardless testing library used.
It depends on implementation details(say, property names inside the state) so it becomes much harder to maintain tests - more tests to change, easy to get test broken when app is fine etc.
You cannot call that once you convert class component to functional one with hooks. So you depends on implementation details even more.
And finally direct state manipulation may end with state you would never get in real world. This means your component will be broken because it's impossible to reach some state but your tests with direct initialization will be fine.
So what you better do? Provide props, change props, call props(wrapper.find('button').filter(button => button.text() === 'Cancel').props().onClick() for enzyme, fireEvent.click(getByText(/Cancel/i)) for RTL) and verify against what's rendered.
This way your tests will be shorter, most actual and need less changes after you update component under test.