mobx | 易学教程

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

阅读更多关于 React + Mobx: 'this' is null when trying to update store

问题 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";

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

阅读更多关于 SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

问题 I keep hitting this error. Its happened a few times recently and now I can't get rid of it. I'm using MobX in my React Native project and so I need something in my .babelrc so I have decorator support: { "presets": ["react-native"], "plugins": ["transform-decorators-legacy"] } I've tried a few difference variations but all give me the error below. If I remove it, I get an error due to decorators not being supported. SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

Rerender React component when props change?

阅读更多关于 Rerender React component when props change?

问题 I have a react component with a Mobx store that looks like this: class Board extends Component { componentDidMount() { this.props.dataStore.getSinglePlayer(1) this.props.squareStore.getAllSquares() } componentWillReceiveProps(nextProps) { if ( this.props.dataStore.currentPlayer !== this.nextProps.dataStore.currentPlayer ) { this.nextProps.dataStore.getSinglePlayer(1) } } randomNumber() { return Math.floor(Math.random() * 6) + 1 } roll(playerId, playerPosition) { let dice1 = this.randomNumber(

mobX - Filter countries in react native?

阅读更多关于 mobX - Filter countries in react native?

问题 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

ReactJS MobX and react-router v4 issue with url history

阅读更多关于 ReactJS MobX and react-router v4 issue with url history

问题 I am making web-application with ReactJS, MobX, and react-router v4 and I have some problems with router history and redirections. I am trying to redirect the user the home page when he will logout or login, and I am trying to implement this in my store. Here is the source code: index.js const APP = document.getElementById('app'); render( ( <Provider {...stores} > <MuiThemeProvider> <Router history={history} > <div> <Routes /> </div> </Router> </MuiThemeProvider> </Provider> ) , APP); Routes

React Mobx - component not updating after store change

阅读更多关于 React Mobx - component not updating after store change

问题 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';

状态管理之 Flux、Redux、Vuex、MobX（概念篇）

阅读更多关于状态管理之 Flux、Redux、Vuex、MobX（概念篇）

本文是对 Flux、Redux、Vuex、MobX 几种常用状态管理模式的总结，偏向于概念层面，不涉及过多代码。状态管理什么是状态管理？状态管理就是，把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化可以预测。为什么需要状态管理？状态共享组件之间通常会有一些共享的状态，在 Vue 或者 React 中我们一般会将这部分状态提升至公共父组件的 props 中，由父组件来统一管理共享的状态，状态的改变也是由父组件执行并向下传递。这样会导致两个问题: 需要将共享的状态提升至公共的父组件，若无公共的父组件，往往需要自行构造状态由父组件自上而下逐层传递，若组件层级过多，数据传递会变得很冗杂变化跟踪在应用调试过程中，可能会有跟踪状态变化过程的需求，方便对某些应用场景的复现和回溯。这时候就需要统一对状态进行管理，并遵循特定的约定去变更状态，从而让状态的变化可预测。 Store 模式 Store 模式是一种相对简单的状态管理模式，一般有以下约定：状态存储在外部变量 store 里（也可以是全局变量） store 中的 state 用于存储数据，由 store 实例维护 store 中的 actions 封装了改变 state 的逻辑流程图如下：如果对 state 的变更均通过 actions，那么实现记录变更、保存快照、历史回滚就会很简单，但是

状态管理之 Flux、Redux、Vuex、MobX（概念篇）

阅读更多关于状态管理之 Flux、Redux、Vuex、MobX（概念篇）

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

阅读更多关于 MobX - Why should I use `observer` when I could use `inject` when injecting data into a React component

问题 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 = {

ReactJS MobX and react-router v4 issue with url history

阅读更多关于 ReactJS MobX and react-router v4 issue with url history

I am making web-application with ReactJS, MobX, and react-router v4 and I have some problems with router history and redirections. I am trying to redirect the user the home page when he will logout or login, and I am trying to implement this in my store. Here is the source code: index.js const APP = document.getElementById('app'); render( ( <Provider {...stores} > <MuiThemeProvider> <Router history={history} > <div> <Routes /> </div> </Router> </MuiThemeProvider> </Provider> ) , APP); Routes.js @inject('userStore', 'commonStore') @withRouter @observer class Routes extends Component { render()

订阅 mobx