mobx

I have an array of 3 countries and a text input to filter them. If you type in the text input, it should check for what you typed against the country name, which should return the new filtered list of countries that match the filtered text. It should also display the inputted text next to Typed Text: import React, { Component } from 'react' import { View, Text, TextInput } from 'react-native' import { observable, action } from 'mobx'; import { observer } from 'mobx-react/native' @observer export default class Country extends Component { @observable filterTermValue; @observable countriesList =

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 {.

I'm exploring MobX and went intrigued by a problem: If I have this observable: class ItemsStore { @observable items = [1,2,3]; } const store = new ItemsStore; and then change it like this: setInterval(() => { store.items[0] = +new Date }, 1000) I noticed the following: autorun(() => console.log(store.items)); never fires... autorun(() => console.log(store.items[0])); fires every 1s and gives a new value autorun(() => console.log(store.items.length)); fires every 1s although value is unchanged What is the API logic behind this? I would expect that since store.items never fires, that unchanged

I'm using MobX 2.2.2 to try to mutate state inside an async action. I have MobX's useStrict set to true. @action someAsyncFunction(args) { fetch(`http://localhost:8080/some_url`, { method: 'POST', body: { args } }) .then(res => res.json()) .then(json => this.someStateProperty = json) .catch(error => { throw new Error(error) }); } I get: Error: Error: [mobx] Invariant failed: It is not allowed to create or change state outside an `action` when MobX is in strict mode. Wrap the current method in `action` if this state change is intended Do I need to supply the @action decorator to the second

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

Let's take a class like this in an app with React and React Router. @observer class Module1 extends React.Component { constructor (props) { super(props); //... } componentWillMount(){ //... } method(){ //... } otherMethod(){ //... } render() { return ( <ChildComp bars={this.props.bars}/>} ); } } And let's take a state like this state = observable({ module1:{ bars:{ //... } }, module2:{ foos:{ //... } } }) The Module1 component is loaded like this: //index.js render( <Router history={browserHistory}> <Route path="/" component={App}> <Route path='/map' component={Module1} > <Route path="/entity/

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,