标签: mobx-react

我们使用 mobx-react-form ( https://github.com/foxhound87/mobx-react-form ) 作为我们的表单。我们的一种表格有一个多选下拉菜单。根据选择，在表单中添加/删除字段。这如何以 mobx-react-form 进行管理？

我想做一些假的我的ajax调用所以当在localhost上我可以从假方法中带回虚拟数据而不是对我的服务器进行真正的调用(结构可能不存在).

在reactjs + mobx中执行此操作的最佳方法是什么？

我正在考虑制作一个假商店,因为这是我的所有操作都在我的ajax调用,但这将涉及总是使整个商店具有所有功能.

然后,我可能会从商店中提取出ajax调用,然后对这些调用进行模拟,但我不确定最好的方法.

我的 Store.js：

import { observable, useStrict, action } from 'mobx';

useStrict(true);

export const state = observable({

    contacts: []

});

export const actions = {

    addContact: action((firstName, lastName) => {
        state.contacts.push({
            id: Math.floor((Math.random() * 1000) + 1),
            firstName: firstName,
            lastName: lastName
        });
    })

};

我的 index.js：

import React from 'react';
import { Provider } from 'mobx-react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { state, actions } from './Store';

ReactDOM.render(
    <Provider state={state} actions={actions}> …

我试图从我拥有的每个组件页面访问我的商店，所以我按照以下教程连接 React Router 和 MobX。

http://frontendinsights.com/connect-mobx-react-router/

但是，我在MobX 方式中遇到了一个问题——提供者组件。

这是代码示例：

import { Provider } from 'mobx-react';
import usersStore from './stores/usersStore';
import itemsStore from './stores/itemsStore';

const stores = { usersStore, itemsStore };

ReactDOM.render(
  <Provider {...stores}>
    <Router history={history}>
      <Route path="/" component={App}>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('app')
);

我试图在 index.js

import React from 'react'
import { render } from 'react-dom'
import { Router, hashHistory, Route, IndexRedirect } from 'react-router'
import App from './webapp/App'
import Home from './components/pages/Home'
import Dogs from './components/pages/Dogs' …

在控制台中，我看到以下警告：

index.js：2178警告：主体具有一个名为shouldComponentUpdate（）的方法。扩展React.PureComponent时不应该使用shouldComponentUpdate。如果使用shouldComponentUpdate，请扩展React.Component。

Body 组件正在使用

...
import { observer, inject } from 'mobx-react';
...
@inject('store')
@observer
class Body extends React.PureComponent<BodyProps> {
...

但在shouldComponentUpdate任何地方都没有这种方法。

这是从哪里来的mobx-react？我可以PureComponent在用@observable或装饰的组件中使用@inject吗？

我正在组装一个小型 React 应用程序并尝试将 MobX 合并到依赖项中。下面是 babel 的 package.json 设置。

"babel": {
"presets": [
  "@babel/preset-env",
  "react-app"
],
"plugins": [
  [
    "@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }
  ],
  [
    "@babel/plugin-proposal-class-properties",
    {
      "loose": true
    }
   ]
 ]
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.5"
}

启动服务器时出现的实际错误如下：

./src/index.js
Module build failed: ReferenceError: Unknown plugin "@babel/plugin-proposal- 
decorators" specified in 
"/Users/briankaty1/Desktop/mobx/aquastars/react_aquastars/package.json" at 0, 
attempted to resolve relative to 
"/Users/briankaty1/Desktop/mobx/aquastars/react_aquastars"

任何帮助将不胜感激。

我有三个组成部分；表单、预览和 AppStore。单击表单中的按钮会将商品添加到商店。这似乎工作正常，除了预览组件中的列表在商店更改时不会更新/重新渲染，即使它有一个 @observer 装饰器。我缺少什么？

表单有一个按钮和处理函数，用于将项目添加到商店：

    @inject('AppStore')
    @observer class Form extends React.Component{

      handleAddItem= (item) =>{
        const {AppStore} = this.props;
        AppStore.addItem(item);
        console.log(AppStore.current.items)
      }

      render(){
        return(
              <button onClick={() => this.handleAddItem('Another Item')}>Add Item</button>

        )}
    }

通过项目预览地图（我正在使用拖放功能，因此我的代码可能看起来有点奇怪）

  @inject('AppStore')
  @observer class Preview extends React.Component

...

return(
   <ul>
       {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
        ))}
  </ul>)

...

  return <SortableList items={AppStore.current.items} onSortEnd={this.onSortEnd} />;

这里是商店：

import { observable, action, computed } from "mobx";

class AppStore {
  @observable other = {name: '', desc:'', items: [ 'item 1', …

我的组件有两个Rect.useEffect钩子

const Example = ({ user }) => {
  React.useEffect(() => {
    autorun(() => {
      console.log("inside autorun", user.count);
    });
  });

  // Only runs once
  React.useEffect(() => {
    console.log("Why not me?");
  });

  return <Observer>{() => <h1>{user.count}</h1>}</Observer>;
};

我使用mobx. 它被正确地重新渲染。但是"Why not me?"只打印一次。

根据官方文档

默认情况下，效果在每次完成渲染后运行

这意味着console.log("Why not me?");也应该在每次user更新prop 时运行。但事实并非如此。控制台输出是这样的

这种明显的不一致背后的原因是什么？

我的完整代码可以在这里查看

我定义了一个从数组中删除项目的操作：

export default class myStore {

  @observable items = [];
  ...
  ...

  @action deleteItem = async (target) => {
    try {
      await backendService.deleteItem(target.id);
      runInAction(() => {
        const targetIndex = this.items.indexOf(target);
        this.items.splice(targetIndex, 1);
      });
    } catch (error) {
      ...
    }
  };

  ...
  ...
}

尽管我将组件设置为observer，但它仍然不会更新我的列表，直到我触发一些其他操作（单击、重命名等），在这种情况下，我将能够看到该项目已被删除。

我错过了什么吗？

如果您想以一种固执己见的方式使用 mobx 进行状态管理，则官方 Mobx 页面上推荐了这两种方法。

基于这些（1、2 ）， keystone看起来像是状态树的改进。拥有状态树所拥有的一切以及更多。我在任何地方都找不到状态树具有而梯形图没有的任何东西。

我发现 keystone 远没有 state-tree 那么成熟。这可能是阻止我选择它的主要原因。状态树相对于梯形校正还有哪些优点？

PS 它将在 React 应用程序中使用。