I am trying to understand how to combine react native fast refresh with redux. I have cloned the following project: https://github.com/amandeepmittal/rnReduxhooks
When changing code in the view ViewNotes.js fast refresh works fine. But when changing code in the reducer notesApp.js fast refresh resets the redux state.
How can I prevent that?
Is there a tutorial for react native and redux similar to the ones for react and redux? (https://duske.me/setting-up-hot-module-replacement-with-create-react-app-and-redux/)
I solved it by saving the state on each change into a variable mycache defined in a new file statecache.ts. When creating the store I hydrate the state from this variable.
Thus the state is only resetted when I edit statecache.ts but not when I edit reducers / views.
https://github.com/denniske/rnReduxhooks/commit/c2a0279927bf7c32b5f2507905ad146cff742770
Related
I am building a React Native game with multiple screens. I am trying to instantiate Ably one time and use it throughout the application without having to call new Ably('api-key') on every screen, as this is creating multiple new connections and making it impossible to keep a single connectionId. Is there a way to architect this so that I can define
const client = new Ably('api-key')
one time in App.js and use it throughout the other screens? Either by passing it as props through React Navigation props or using Context? The documentation on this is sparse as most of their documentation only uses this on one page.
Redux will not work. You can create an Ably client and pass it to other components using props, or just use React context to make it available to the whole application. Using redux to store an Ably client will cause an error since Ably clients aren’t serialisable.
See https://reactjs.org/docs/context.html for more info.
Here are some examples:
https://github.com/ably-labs/react-hooks
https://ably.com/blog/ably-react-hooks-npm-package
Cheers,
Richie
I am new to React Native and I want to add Redux to my project.
And I want to know if redux store values are saved when app is exited.
If it is not saved, how can I handle this problem?
In web development, we use cookie and local storage. Thanks in advance.
[Edit]
If I must use async storage, is there any easy way to approach this?
Redux state is usually emptied upon when an app is exited (not minimised).
What you should to instead is to use AsyncStorage to persist your access token, and get them from same storage when the app starts. You can do this in a didMount lifecycle, or any other means you may choose.
There is Ayncstorage for react native which is equivalent to localstorage in browser.
You can refer this
https://reactnative.dev/docs/asyncstorage
Or you can use redux-persist if you want to persist redux store when app exits which would otherwise get lost.
https://github.com/rt2zz/redux-persist
We are using redux navigation and persisting redux state. However, sometimes when the user navigates to the page and an unexpected error occurs app crashes with a white screen. If the app is launched again it obviously crashes again because the same state is loaded. As the result app becomes unusable - the white screen crash straight after the app launches.
I guess it is fine to crash the app if there is a bug on one of the screens, but because of one buggy screen I don't want to make the entire app unusable for a user and it would be great to somehow reset a state and enable the user to keep using other functionality of the app.
Any ideas on how to achieve that?
I think the real question is: do you want to persist navigation state at all? Do you really want to load last visited screen on app launch rather than the first screen of the app? I've never seen an app that does this
Another question is how do you persist your navigation state in redux. It was only a pattern when using older versions of react-navigation (v1 and v2 if I recall correctly) but even then it wasn't the optimal pattern to keep navigation state in redux (redux integration of react-navigation v1), let alone persist it on restarts. Navigation is something that should start fresh every time user launches the app
Also read about state persistence in current version (v5 - https://reactnavigation.org/docs/state-persistence) usually there is no redux involved at all
About state persistence: usually you only persist long-living things like auth state, authorization tokens, user settings, but not some dynamic data that gets discarded often. For example, if you open some page and fetch data to display on that page, there is no reason to persist that data in AsyncStorage, because why would you? This data should be reloaded every time page opens instead of restored from persisted state. Redux-persist lets you whitelist or blacklist different parts of the state
To summarize:
1. figure out if you need to persist navigation state at all. If not, problem solved
2. if you do, try to setup redux-persist the way that it doesn't persist short-living error-prone data
3. figure out how navigation state is persisted (through redux or on it's own, see examples in the links I provided earlier)
4. integrate react-native-exception-handler, catch exceptions and reset persisted navigation state in case of a crash
How can I intercept the reloading process on Android (Dev menu -> Reload)?
I want to clear some part of Redux store when is happend the action.
The question provides quite a little insight but seeing that some working is required on the redux store every time there is a reload, you can catch INIT action fired by Redux every time the store is initialised, IMO
Has anyone else ran into this issue? I'm working on a react native app and hot reloading with state works fine using react native debugger and redux devtools, but once I make a change within a higher order component or make a change to a component that uses a higher order component, my redux state disappears from the devtools and everything needs a hard refresh. When I make changes to files without higher order components everything works as expected.
You need to make sure that the root of the app is wrapped in the store / hot-module