mobx-react

React + Mobx: 'this' is null when trying to update store

由 随声附和 提交于 2019-12-09 13:34:53
问题 Just getting started with Mobx & React and having trouble getting the store to update. I get error when clicking the button, which should update the 'me' property: Store.js:12 Uncaught TypeError: Cannot set property 'me' of null My store: import { observable } from 'mobx'; class Store { @observable me; constructor() { this.me = 'test'; } change_me(){ this.me = 'test 1'; console.log(this); // null??? } } const store = new Store(); export default store; The component: import React from "react";

React Mobx - component not updating after store change

由 对着背影说爱祢 提交于 2019-12-07 02:44:22
问题 Using Mobx, after updating the store (i.e. clicking the button) the component does not re-render. I've installed mobx devtools which shows nothing after the initial load, and there is no error in the console. Any ideas what I've done wrong? Store.js: import { observable } from 'mobx'; class Store { @observable me; constructor() { this.me = 'hello'; } change_me(){ this.me = 'test 1234'; } } export default Store; layout.js: import React from "react"; import { observer } from 'mobx-react';

MobX - Why should I use `observer` when I could use `inject` when injecting data into a React component

由 霸气de小男生 提交于 2019-12-06 02:55:22
问题 MobX documentation suggests I should use observer on all my components. However by using inject I get more fine grained control over what data causes a re-rendering of my components. My understanding is I that with observer , a change in all accessed observables in the last render will cause a re-render, even if the observable is nested deep in the data store, while inject only re-renders when observables accessed in the injector function change. For example: class Store{ @observable data = {

MobX + React Native : way to inject stores

由 自古美人都是妖i 提交于 2019-12-05 16:36:28
I'm trying to work with MobX for a new project. I started it on May 2017, and everything was working well. I had to stop, and now I go on developing it. I had to make an npm install to manage making it working, but now, I have some problem with stores... I rely on this tutorial for the structure : https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb This is my structure : Main index.js import { Provider } from 'mobx-react'; import Stack from './router'; import stores from './stores'; export default class App extends Component { render() { return ( <Provider {.

How to instantiate react component with injected properties

由 人走茶凉 提交于 2019-12-04 05:08:22
问题 I'm converting a react project from redux to mobx, and I'm having the following problem: I was using the container/presenter pattern with redux, which meant using the redux "connect" function, like this: export default connect(mapStateToProps, mapDispatchToProps)(Leads); The problem I'm having is that there's no equivalent mobx function, so instead, I tried to simply create an instance of the component in the container. Something like: render() { return ( <MyComponent store={mystore} /> ); }

React-MobX Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean

由 一个人想着一个人 提交于 2019-12-03 11:41:40
I get the following error: If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'. package.json "@babel/plugin-proposal-decorators": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.1.2.tgz", "integrity": "sha512-YooynBO6PmBgHvAd0fl5e5Tq/a0pEC6RqF62ouafme8FzdIVH41Mz/u1dn8fFVm4jzEJ+g/MsOxouwybJPuP8Q==", "requires": { "@babel/helper-plugin-utils": "^7.0.0", "@babel/helper-replace-supers": "^7.1.0", "@babel/helper-split

What is the best way to create a single MobX store for an app?

由 ￣綄美尐妖づ 提交于 2019-12-03 07:33:54
问题 I have been using MobX and Redux for about 6 months. I have found that I prefer the simplicity of MobX for most applications. However, I like the single store concept of Redux. I have heard others comment that they create a single story with MobX and I am trying trying to determine the best way. Currently I create a multiple stores and then import them into a single store. class UiStore { @observable uiData; constructor() { this.uiData = {} } @action updateUI = (data) => { this.uiData = {

What is the best way to create a single MobX store for an app?

由 久未见 提交于 2019-12-02 21:04:01
I have been using MobX and Redux for about 6 months. I have found that I prefer the simplicity of MobX for most applications. However, I like the single store concept of Redux. I have heard others comment that they create a single story with MobX and I am trying trying to determine the best way. Currently I create a multiple stores and then import them into a single store. class UiStore { @observable uiData; constructor() { this.uiData = {} } @action updateUI = (data) => { this.uiData = { data: data }; } } let uiStore = new UiStore(); export default uiStore; class Store { @observable

How to instantiate react component with injected properties

由 随声附和 提交于 2019-12-02 05:58:58
I'm converting a react project from redux to mobx, and I'm having the following problem: I was using the container/presenter pattern with redux, which meant using the redux "connect" function, like this: export default connect(mapStateToProps, mapDispatchToProps)(Leads); The problem I'm having is that there's no equivalent mobx function, so instead, I tried to simply create an instance of the component in the container. Something like: render() { return ( <MyComponent store={mystore} /> ); } Unfortunately, that doesn't work, because MyComponent has injected properties from react-router,

How to navigate in mobx store using react navigation?

由 ⅰ亾dé卋堺 提交于 2019-12-01 11:38:38
问题 I can use this.props.navigation from screen component to navigate. How should I do the similar in mobx store file? Or should I perform navigation in store? I read the Navigating without the navigation prop article, but it seems only works for screen components, right? Someone says use global variable to store a this.props.navigation reference and use it anywhere, but I don't like the idea... 回答1: Yes either: forward the navigation class to the store when calling the method: // add nivagation
订阅 mobx-react