标签: mobx

该MobX文档告诉我,我必须"使用变换插件变换装饰遗留并确保它是第一个在插件列表",为了使装饰工作.MobX样板项目表明我需要一个.babelrc:

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy", "react-hot-loader/babel"]
}

如何使用create-react-app生成的项目执行此操作？任何尝试使用@装饰器错误..babelrc项目被"弹出"后甚至没有.

试图基本上完成这个https://github.com/elgerlambert/redux-localstorage,它适用于Redux但是为Mobx执行.并且最好想使用sessionStorage.有一个简单的方法来实现这个最小的样板吗？

我一直在使用MobX和Redux大约6个月.我发现在大多数应用程序中我更喜欢MobX的简单性.但是,我喜欢Redux的单店概念.我听到其他人评论他们用MobX创建了一个故事,我正试图确定最好的方法.目前,我创建了多个商店,然后将它们导入到单个商店中.

class UiStore {
  @observable uiData;

  constructor() {
    this.uiData = {}
  }

  @action updateUI = (data) => {
    this.uiData = {
      data: data
    };
  }
}

let uiStore = new UiStore();
export default uiStore;

class Store {
  @observable currentUser;

  constructor() {
    this.auth = authStore;
    this.ui = uiStore;
  }

}

let store = new store();
export default store;

在这里,我基本上创建了单独的商店,然后将它们合并到一个商店中,类似于redux减速器的工作原理.

还有其他/更好的方法吗？我想过可能会将一个商店导入到不同的文件中,并将一些方法和数据放在一个类上prototype.

刚开始使用 Mobx 和 React，并且无法更新商店。单击按钮时出现错误，该按钮应更新“我”属性：

Store.js:12 Uncaught TypeError: Cannot set property 'me' of null

我的店铺：

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;

组件：

import React from "react";
import { observer } from 'mobx-react';

export default class Layout extends React.Component{

    render(){

        var store = this.props.store;

        return(
            <div>
              <button onClick={store.change_me}>{store.me}</button>
            </div>
        )

    }
}

我可能错过了它如何工作的一些基本部分，但无法弄清楚。

我一直在打这个错误.它最近发生了几次,现在我无法摆脱它.我在我的React Native项目中使用MobX,所以我需要一些东西,.babelrc所以我有装饰器支持:

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

我尝试了一些不同的变化,但都给了我下面的错误.如果我删除它,由于不支持装饰器,我收到错误.

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
    at Parser.pp$5.raise (/path-to/node_modules/babylon/lib/index.js:4246:13)
    at Parser.pp$1.parseStatement (/path-to/node_modules/babylon/lib/index.js:1749:16)
    at Parser.pp$1.parseBlockBody (/path-to/node_modules/babylon/lib/index.js:2133:21)
    at Parser.pp$1.parseTopLevel (/path-to/node_modules/babylon/lib/index.js:1645:8)
    at Parser.parse (/path-to/node_modules/babylon/lib/index.js:1537:17)
    at Object.parse$1 [as parse] (/path-to/node_modules/babylon/lib/index.js:6466:37)
    at extractDependencies (/path-to/node_modules/react-native/packager/react-packager/src/JSTransformer/worker/extract-dependencies.js:29:23)
    at transform (/path-to/node_modules/react-native/packager/react-packager/src/JSTransformer/worker/index.js:53:9)
    at module.exports (/path-to/node_modules/react-native/packager/transformer.js:130:3)
    at transformCode (/path-to/node_modules/react-native/packager/react-packager/src/JSTransformer/worker/index.js:27:3)
transformed 35/139 (25%)/path-to/node_modules/babylon/lib/index.js:4249
  throw err;

我已经尝试删除我的node_modules并重新安装几次.我正在使用纱线.在yarn install再次运行之前还删除了锁定文件.

我按照本指南安装了Babel插件.我package.json看起来像:

  "dependencies": {
    "apsl-react-native-button": "^3.0.0",
    "mobx": "^2.5.0",
    "mobx-react": "^3.5.5",
    "react": "15.3.2",
    "react-native": "0.37.0", …

从 MobX 存储中获取的变量成为Proxy控制台中的对象。

我们如何记录实际变量？

在mobx-react 文档中，store 的创建方式存在差异。例如，在React Context页面上：

在第一个代码示例中，商店使用 useLocalStore 实例化：

  const store = useLocalStore(createStore)

在第二个代码示例中，商店是通过直接“新建”商店来启动的：

  counterStore: new CounterStore(),
  themeStore: new ThemeStore(),

通过推断，第一个是“本地”存储（因此需要 useLocalStore），第二个是“全局”存储，因此不需要。然而，目前尚不清楚这是为什么，以及随后的行为差异是什么。

为什么useLocalStore在第二个例子中不需要，这对 React 中的 store 和 mobx 的行为有什么不同？

感谢您提供任何意见

编辑:我最终选择了Mobx.js,详情请参阅@mweststrate答案.

关于redux的所有学习资源都展示了如何将它与普通对象模型一起使用.但是当你使用一些es6 Class模型时,我无法弄清楚如何使用它.

例如,让我们采用这种状态形状:

{
 players:{
   000:{
     life:56,
     lvl:4,
     //...
  },
   023:{
     life:5,
     lvl:49,
     //...
  },
   033:{
     life:679,
     lvl:38,
     //...
  },
   067:{
     life:560,
     lvl:22,
     //...
  },
  //...
}

而这堂课(未经测试)

class Player{
  id; //int
  life; //int
  lvl; //int
  buffs; //[objects]
  debuffs; //[objects]
  inventory; //[objects]

  _worldCollection; //this class know about the world they belongs to.

  constructor({WorldCollection}){
    this._worldCollection = WorldCollection;
  }

  healPlayer(targetId, hp){
   this._worldCollection.getPlayer(targetId).setHealth(hp);
  }

  // setter
  setHealth(hp){
    this.life += hp;
  }
}

想象一下,我在WorldCollection中收集了100名玩家.什么是最好的方法？

取1:将所有属性从实例复制到状态树

{
  players:{
    001:{
      life: 45,
      lvl: 4,
      buffs: …

标题几乎是自我解释的。我找不到任何关于它的信息。Angular 在幕后使用 RxJs observables 是不是在 React 和 MobX 中是一样的？

我有一个用TypeScript编写的React应用程序（16.8.6），该应用程序使用React Router（5.0.1）和MobX（5.9.4）。导航正常运行并应在适当的时候加载数据，但是，当我单击浏览器的“后退”按钮时，URL会更改，但不会更新任何状态，并且页面也不会重新呈现。我已经阅读了有关此问题和withRouter修复的无数文章，我尝试了这些文章，但没有什么不同。

一个典型的用例是导航到摘要页面，选择导致加载新数据和推送新历史记录状态的各种操作，然后再返回几个步骤。大多数历史记录推送都发生在摘要组件中，该组件处理多个路由。我已经注意到，当从摘要页面返回到主页时，将按应有的方式进行重新渲染。

我的index.tsx

import { Provider } from 'mobx-react'
import * as React from 'react'
import * as ReactDOM from 'react-dom'

import App from './App'
import * as serviceWorker from './serviceWorker'
import * as Utils from './utils/Utils'

const rootStore = Utils.createStores()

ReactDOM.render(
    <Provider {...rootStore }>
        <App />
    </Provider>,
    document.getElementById('root') as HTMLElement
)

serviceWorker.unregister()

我的app.tsx

import * as React from 'react'
import { inject, observer } from 'mobx-react'
import { Route, Router, Switch } from 'react-router'

import Home from './pages/Home/Home' …