Comments (7)
Can you provide a minimal implementation of this so that I can be sure I understand what is happening in your use case?
from reactn.
Strange thing, I've made the minimal implementation with basically the same code and it's working.
https://snack.expo.io/@eskel/globaltoasts
I guess it's not a reactn issue then, sorry.
from reactn.
@CharlesStover I've examined it a little more and it seems that the origin is indeed in reactn, the enqueueForceUpdate call. I guess snack has a different YellowBox settings or their forked RN behaves differently. I see it in React Native 0.59.2. Here is a screenshot of the warning:
So the question is, do you support calls from unmounted components?
from reactn.
I would like to support your use case where possible. Can you provide a minimal implementation that causes this error? You mentioned the code sandbox provided above works.
from reactn.
@CharlesStover I found out that the sandbox (Expo snack) has it's own implementation of console and is not showing all React Native warnings. :( I'll let them now.
The code works both in sandbox and in production code, it's just the warning that forceUpdate should not be run in my case.
I've made and tested the minimal implementation, (it shows the warning) but it takes some time to build and install, if you don't have much experience with RN.
Here: https://github.com/EskelCz/reactn-global-test/blob/master/App.js
from reactn.
Thank you for the example. Why are you extending Component
if it's not a React Component? If it's just for the global member variables and methods, you can import those directly from reactn
, the same way you instantiated the state.
class ToastAPI extends Component {
showToast (text) {
const toastList = this.global.toasts
toastList.push({ text: 'Some toast' })
this.setGlobal({ toasts: toastList })
}
}
export const Toasts = new ToastAPI()
can be:
import { setGlobal } from 'reactn';
export function showToast(text) {
setGlobal(global => ({
toasts: global.toasts.concat([ { text: 'Some toast' } ]),
});
};
If you want to maintain your toast API as a class, just don't extend Component
:
import { setGlobal } from 'reactn';
class ToastAPI {
showToast(text) {
setGlobal(global => ({
toasts: global.toasts.concat([ { text: 'Some toast' } ]),
});
}
};
export const Toasts = new ToastAPI();
Does this solve your problem while meeting your use case? My interpretation of the problem is that you were wanting ReactN's global state functionality outside of a React Component.
from reactn.
Awesome, that did it. :) At first I was using vanilla class but then I didn't know how to get the global state inside it. I must admit I don't really find the callback pattern very readable setGlobal(global => ({
. But it works and doesn't cause the warning. Thanks a lot!
from reactn.
Related Issues (20)
- Can we drop in preact in place of React while using Reactn? HOT 1
- Global state resets after Route change HOT 5
- Don't export functions with the same name as common React hooks HOT 1
- [Query] Does updating a global nested state, require deep copy ? HOT 2
- why is useEffect exported from the package? HOT 2
- Dependabot can't resolve your JavaScript dependency files
- Provider.useDispatch Errors with TypeScript HOT 1
- Global reducers do not work in TypeScript 4. HOT 4
- Ability to update state with a function with globalPropertySetter HOT 1
- React Native expo HOT 2
- react native compatible? HOT 5
- Feature request: add previous global state to addCallback parameters HOT 10
- useEffect in useGlobal has no dependencies and will run every render HOT 1
- Document how to put arrays and etc. in global state HOT 6
- Unwanted batch rendering
- Argument of type 'string' is not assignable to parameter of type 'never' HOT 3
- Dispatch re-renders components even when state is unchanged. HOT 2
- Set `peerDependencies` to `"@types/react": "^16.8.0 | ^17.0.2"` HOT 2
- Issue resolving dependency to `use-force-update` in react-native/expo project HOT 7
- Dependency Use force update 1.0.10 causes a Type Error HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactn.