score:10
a function that alters the observables needs to be wrapped in action
, so use it on the callback as well:
getalltodos: action(() => {
services.getalltodos()
.then(action((response) => {
state.items.replace(response.data);
})).catch((error) => {
console.error(error);
});
})
score:3
as stated in the mobx docs here:
the action wrapper / decorator only affects the currently running function, not functions that are scheduled (but not invoked) by the current function! this means that if you have a settimeout, promise.then or async construction, and in that callback some more state is changed, those callbacks should be wrapped in action as well!
thus, you'd have to wrap the scheduled promise.then
here in an action as well, apart from the parent function. (note that you'd only be able to use the @action
on the class-level function)
there are two ways of doing it:
action(
asyncfunction().then(
action((args) => {
// your function body here
})
)
)
--or--
use the @action.bound
:
@action
asyncfunction().then(
yourstatemodifyingfunction();
)
@action.bound
yourstatemodifyingfunction() {
// your function body here
}
Source: stackoverflow.com
Related Query
- Mobx changing observable values outside of action
- Mobx changing observed observable values outside actions is not allowed issue with antd
- MobX: Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed
- How to set new values to whole MobX observable array
- how to display in react render without rerendering, automatically changing values of mobx store instance?
- How to write mobx action methods in separate files and import them to the actual mobx class having observable variables?
- Is it possible to trigger a Redux action from outside a component?
- Access Formik's values outside of component | React
- Scroll events unintentionally changing Material UI slider values
- MobX performance when replacing observable data
- Using MobX observable decorators with create-react-app
- How to dispatch redux action outside of a component?
- MobX 'this' is undefined in setter action
- Element values shifting and changing before transition with react-transition-group
- How to test react components with mobx observable state
- mobx react action binding
- How to check if object is in Mobx observable array?
- Detect when mobx observable has changed
- React Mobx componentDidUpdate is not updating when observable changes
- Material-UI Slider - Changing Values using Scale
- Is it possible to use React Hooks outside of functional component, or i have to use mobx or redux?
- Mobx doesn't observe classes in observable array
- How to make MobX update the component when observable is not used in the render method?
- Access MobX state outside of React Components?
- changing React.js form values from a chrome extension
- Pass values as parameters state from the component or access the status in the action creator?
- Redux: where to place interaction with the DOM, that is triggered by an action but changes outside of the React app
- How to convert decorator @action to non-decorator action in MobX
- Redux-i18n accessing t() function outside React components, e.g. in action creators
- React component does not react to mobx observable data
More Query from same tag
- How do I pass values between React Redux components?
- How to tell if a website is using next.js?
- React Bootstrap and React.PropTypes validation function
- how to make text responsive to its container?
- adding images to in react with dynamic links
- Understanding nesting vs parent in ReactJS
- Query firestore by inequality
- Next.JS: Warning Expected server HTML to contain a matching <a> in <div>; How to rehydrate?
- CSP script-src strict-dynamic with hash is blocking host domain
- React and bootstrap: component not rendering
- How to scroll to an element on a page which has a fixed header when clicked on a table row?
- how to open a modal using redux & react-native
- Javascript removeEventListener on dynamic components
- Finding a dynamically-generated child node (React)
- Filter results of array of objects in React, using Filter and state
- How to check if a child element exists in parent in React?
- Argument of type 'string' is not assignable to parameter of type... (React Hook Form) (TypeScript)
- How to connect React frontend to Flask backend URL in production?
- Pagetransition before next page in Nextjs
- React Lifecycles managing intervals with changing values
- How to pass props from one Component to another component with onClick() event in React.js
- Reactjs material icons in css
- Child component not rerendering when state change is triggered by its sibling
- Create product with Shopify Admin API
- Simple form transmission with react & axios
- Is there a simple way to animate a scrollable div from positionA to positionB?
- My dropdown is displayed but the content/filter is not printed out
- getting an error while creating react app
- what if we accidently don't use '()' after calling the method
- How to use setState with fetch API on form submit in React?