标签: mobx

我开始将我的商店连接到mobx.我想知道使用observer(['store'],...)或使用之间的区别inject('store')(observer(...))

我认为注入的主要区别不是反应性.那么注入观察者的意图究竟是什么呢？

我正在使用react-select，以便在我的网络应用中添加多选控件。http://jedwatson.github.io/react-select/ 我正在寻找一个将mobx可观察对象注入控件的好例子。我面临的第一个挑战是以异步方式初始化选项（从服务器获取选项，但此后我希望应用常规过滤，而无需使用异步选项）。有什么好的例子吗？

import Select from 'react-select';

<Select
      multi
      disabled={this.state.disabled}
      value={this.state.value}
      placeholder="Select your favourite(s)"
      options={this.state.options}
      onChange={this.handleSelectChange}
    />

我正在使用 mobx 在 reactjs 中以下列方式声明一个可观察数组

@observable cacheditems

constructor() {
    this.cacheditems  =   []

现在我在离线时从 pouch-db 中检索数据，如下所示：

var items = []
db.allDocs({include_docs: true}, function(err, docs) {
                docs.rows.map((obj, id) => {
                    items.push(obj.doc)
                })
            })


 this.cacheditems = items

但是没有设置数据。当我尝试获取用于呈现空数组的数据时。

我试图让路由器v4从一个动作导航,store而不是明确地将historyprop 传递给需要在某些逻辑运行后导航的每个存储操作.

我正在寻找这样的工作:

import { NavigationStore } from 'navigation-store';

class ContactStore {
  @action contactForm(name, message){
    // Some logic runs here

    // Then navigate back or success

    // Go back
    NavigationStore.goBack();

    // Or Navigate to Route
    NavigationStore.push('/success'); 
  }
}

当然NavigationStore不存在(我不知道从React Router中放入什么来使它工作),但我想导入一个mobx导航存储,我可以用来导航到应用程序中的任何地方(组件或商店)与api相同react-router

怎么做？

更新:

RR4没有为我们提供从商店的行为导航的方法.我试图导航就像上面用RR4.我只需要知道navigation-store应该包含什么,以便我可以:

1. import { NavigationStore } from 'navigation-store'; 任何地方(组件/商店),也可以是历史记录,能够从任何地方导航.
2. NavigationStore.RR4Method(RR4MethodParam?);哪里RR4Method有可用的RR4导航选项,如push,goBack等.(这就是导航应该如何发生)

更新2:

所以url现在更新,NavigationStore.push('/success');但没有网页刷新发生.

这是 navigation-store.js

import { observable, action } from 'mobx'
import autobind …

我不能用@computed。如果我在下面运行我的代码，我会收到一个错误：

Uncaught TypeError: An element descriptor's .kind property must be either "method" or "field", but a decorator created an element descriptor with .kind "undefined"
    at _toElementDescriptor (app.js:46281)
    at _toElementFinisherExtras (app.js:46283)
    at _decorateElement (app.js:46273)
    at app.js:46269
    at Array.forEach (<anonymous>)
    at _decorateClass (app.js:46269)
    at _decorate (app.js:46251)
    at Module../src/App/stores/UserStore.js (app.js:46301)
    at __webpack_require__ (bootstrap:19)
    at Module../src/App/stores/index.js (index.js:1)

这是我的UserStore.js文件：

import { 
  configure,
  runInAction,
  observable,
  action,
  computed
} from 'mobx'
import API from '../api'

configure({ enforceActions: 'observed' })

class UserStore {
  @observable …

我正在使用 React Hooks，当我用来自 mobx 的观察者包装我的组件时，我收到了这个错误。可能是什么问题？是否可以将 mobx 与 React Hooks 一起使用？

import classnames from 'classnames';
import { observer } from 'mobx-react';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import ViewStore from '../../../store/ViewStore';

interface INavbarProps {
  viewStore: ViewStore;
}

const Navbar = observer((props: INavbarProps) => {
  const { authed } = props.viewStore;

  const [drawerIsOpen, setState] = useState(false);

  function toggleMenu() {
    drawerIsOpen ? setState(false) : setState(true);
  }

  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/admin">Admin</Link>
      <Link to="/all">All</Link>
      {authed …

我正在尝试使用 rootstore 访问我的反应项目中的两个不同的商店。RoorStore.ts =>

import ExtractionStore from "./extractionStore";
import UserStore from "./userStore";
import { createContext } from "vm";

export class RootStore {
  extractionStore: ExtractionStore;
  userStore: UserStore;

  constructor() {
    this.extractionStore = new ExtractionStore(this);
    this.userStore = new UserStore(this);
  }
}

export const RootStoreContext = createContext(new RootStore());

但是，在尝试将其注入我的组件时，出现错误：

组件 tsx =>

    const ExtractionDashboard: React.FC = () => {
      const rootStore = useContext(RootStoreContext);
      const { loadWorkList, loadingInitial } = rootStore.extractionStore;

错误：

Argument of type 'Context' is not assignable to parameter of type 'Context<unknown>'.
  Type …

有人可以向我解释什么是真正的区别以及为什么这里的两个示例都相同：

1) 通过 store 文件中的 action/runInAction 更改 observable 的状态：

颜色存储文件：

@observable
color='red'

@action
setColor(){
  this.color='blue'
}

2）通过组件本身改变状态（这被认为是不好的做法）：

反应组件文件：

onClick = () => this.props.colorStore.color='blue' //still working...

我正在使用 Mobx 构建一个 webgl 游戏引擎。我没有将它与反应一起使用。我正在使用它来增强实体组件系统。我有实体类

import {observable, observe, computed, autorun} from 'mobx';

class Entity {
  @observable position = [0,0,0]
  @observable rotation = [0,0,0]

  @computed get modelMat(){
    return position * rotation;
  }
}

我使用这个实体，如：

var ent = new Entity();
entity.position = [0,10,0];
if(entity.modelMat == 6){
  // do something
}

我的理解是，modelMat像这样直接阅读不是最佳做法。它导致计算被重新计算。它没有被缓存。这对我的游戏引擎是有害的，因为我可能会以 60fps 的高速访问这些计算值。

这对我来说似乎不直观，因为您使用gethelper定义了计算，然后不应该将它用作 getter？调试computedRequiresReaction设置可用于防止这种直接计算读取的模式。

configure({
  computedRequiresReaction: true
});

我的问题是如何缓存或记忆这些将频繁访问的计算值？为了避免这种情况，我开始使用一种使用自动运行的模式，在计算更改时更新局部变量。看起来像：

class Entity {
  @observable position = [0,0,0]
  @observable rotation = [0,0,0]

  modelMat = []

  constructor(){
    autorun(() …

我正在尝试使用 react 和 mobx 构建一个自定义组件视频播放器，我需要从主组件到子组件钻取一个引用，但是当我在一个组件上使用 forwardRef 函数时我收到一条错误消息观察者。错误消息是“baseComponent 不是函数”这是代码：

// code for main component
const videoPlayer = () => {

const controlsRef = useRef<any>(null);

return (<div>
// video player screen code //
<VideoPlayerButtonCode ref={controlsRef} />
<div>)

}

// the code for the players component

interface IProps{
 controlsRef: any;
}

const VideoPlayerButtonCode: React.FC<IProps> = fowardRef({props from iprops}, controlsRef ) => {

return (<div>

<Button ref={controlsRef}>Button i want to get a ref for from main</Button>
<div>)

}

export default observer(VideoPlayerButtonCode)

这是代码的模糊抽象，但实现相同。mobx 对 ref …