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
Related
This question already has an answer here:
How to use redux-toolkit createSlice with React class components
(1 answer)
Closed 1 year ago.
I am new to using React Native, and was recently planning on using Redux Toolkit with my project. I was previously using standard Redux, but really like how RTK keeps everything concise with slices.
My project currently uses Class Components for the Screens and would like to keep it that way, but I can't find any documentation on using RTK with Class Components, only with Functional Components. I wanted to know if it was possible to use Class Components and what changes need to be made in order to add RTK. I feel like I should be able to just import the actions from the Slices and then use MapDispatchToProps, but any insight would be appreciated.
Thanks!
Redux Toolkit is purely about writing Redux logic, and is totally separate from how you write your React components and use React-Redux.
So, you can use any combination of:
Redux logic: vanilla hand-written Redux or RTK
React-Redux: connect + class components, or function components + hooks
See the React-Redux docs on using connect:
https://react-redux.js.org/using-react-redux/connect-mapstate
https://react-redux.js.org/using-react-redux/connect-mapdispatch
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
I've been developing apps using react native for a while now establishing my project architecture on redux, React.Component lifecycle and react-native-router-flux (for navigation).
Now, I need to start to develop a big new project which is going to be in production and needs to handle a lot of users.
As I understand I cant keep using React.Compoent as my lifecycle and I need to implement the functionality of the new hooks system.
My main concern is that react native with redux and hooks aren't stable enough and I won't be able to create a stable application.
As I see it I should use react-native with hooks, redux and react-navigation as my main architecture. I will be glad to get your opinion on this one.
Thanks
All component in react can be defined as classes or function. It depends on you.
As I understand I cant keep using React.Compoent as my lifecycle and I need to implement the functionality of the new hooks system
You can still use React.Component if you write component as classes. Use hooks if you write your component as function
My main concern is that react native with redux and hooks aren't stable enough and I won't be able to create a stable application
Why do you know that they aren’t stable. I am using them on my production apps.
Basically, redux use for state management, react navigation for navigation. You could use hooks or not, it doesn’t matter
Is it possible to pass a javascript function from React Native onto iOS Native components such as a UIButton and execute there?
It is possible, but using events and not by sending JS to native components. Check out react-native docs for detailed information, but generally:
React Native enables you to perform cross-language function calls. You
can execute custom native code from JS and vice versa. Unfortunately,
depending on the side we are working on, we achieve the same goal in
different ways. For native - we use events mechanism to schedule an
execution of a handler function in JS, while for React Native we
directly call methods exported by native modules.
I'm trying to use Relay and React Native together.
From my experience so far, I'm forced to create a new RootContainer for every single page I send to the Navigator component.
Is this correct?
Or should there only be one RootContainer that accepts new components/RelayRoutes ? I don't see a way to make this possible from what I tried so far.