标签: mobx

我正在使用mobxflutter 进行状态管理。但在项目中添加后，mobx我无法构建生成的文件。并得到错误

Bad state: Unexpected diagnostics:
C:\flutter\bin\cache\dart-sdk\lib\core\uri.dart:3259:39 - Expected an identifier.
[SEVERE] mobx_codegen:mobx_generator on lib/main.dart:

mobx 文件：-

import 'package:mobx/mobx.dart';

part 'weather_store.g.dart';

class WeatherStore = _WeatherStore with _$WeatherStore;

abstract class _WeatherStore with Store {
  
}

pubspec.yaml：-

  dependencies:
  flutter:
    sdk: flutter
  mobx: ^0.3.10
  flutter_mobx: ^0.3.4+1
  provider: ^3.2.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner:
  mobx_codegen: ^0.3.10+1

如何解决问题？

编辑：- 构建命令flutter packages pub run build_runner watch

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

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

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

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

当 API 返回 401 时，我想强制注销用户。以下代码是使用 Mobx 在 React Native Ignite 项目中编写的

import { useStores } from "../../models"
this.apisauce.axiosInstance.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    useStores().authStore.reset()
  }
  return error;
})

对 authStore.reset() 的调用不会发生，没有错误，没有console.tron.log，什么也没有。有没有更好的做法来捕获401并触发mobx动作？没有在调用 API 的每个单独操作中处理它？

我需要迁移MobX v.5到MobX v6+支持 React hooks 的版本，但是升级到之后MobX v6+出现此错误，[MobX] Cannot obtain atom from undefined我能够追踪到当我想使用 来创建 Lazy observable 时onBecomeObserved，由于某种原因这会抛出上面的错误，但我无法弄清楚是什么原因导致的。

我使用 MobX 提供的注入将组件连接到存储，它可能不再是一个好的模式，但它对我来说是从旧的MobX. withTheme功能是Material-UI连接到主题系统

export function injector<T>(target: T): T {
  return inject('data', 'view')(withTheme(target));
}

export function storeConnect<T extends IReactComponent>(target: T): T {
  return injector(observer(target));
}

这是我创建惰性可观察的基础存储，它应该负责从 API 加载数据，但是我的应用程序崩溃了，无法找到解决方案。

abstract class BaseProvider {
  @observable state = "NONE";

  constructor() {
    //this it throws error
    onBecomeObserved(this, "isLoading", this.loadData);
  }

  public abstract loadData(): …

我试图理解为什么当我更改 mobx 可观察名称数组中的状态时我的应用程序没有重新渲染。我正在使用输入标签更改值。希望得到一些帮助:)

观察者部分：

import {observable, action, autorun, computed} from 'mobx'

class TodosStore {
    @observable names = ["p1", "p2", "p3"]
    @observable filter = ""

    @action
    get filterredValue(){
        return store.names.filter(word => word.includes(this.filter))
    }
}

//@ts-ignore
var store = window.store = new TodosStore

export default store


autorun(() => {
    console.log(store.filter); 
    console.log(store.names); 
})

这是我的应用程序组件：

import React from 'react';
import './App.css';
import store from  './components/observers'

class App extends React.Component {
  constructor(props :any) {
    super(props);
    this.setName = this.setName.bind(this);
  }

  setName = (e : any) => …

我已经使用简单的 MobX 商店构建了一个基本的计数器 React 应用程序。我能够使用创建可观察的 MobX 状态，makeObservable但由于某种原因，当我尝试使用时makeAutoObservable出现错误

Cannot read property 'counter' of undefined

我怎么使用makeAutoObservable不正确？

店铺

import { makeAutoObservable, makeObservable, action, observable } from "mobx";

class SampleStore {
  counter = 0;

  constructor(arg) {
    makeAutoObservable(this);
    // makeObservable(this, {
    //   counter: observable,
    //   increment: action.bound,
    //   decrement: action.bound,
    // });
  }

  increment() {
    this.counter++;
    return this.counter;
  }

  decrement() {
    this.counter--;
    return this.counter;
  }
}

export default SampleStore;

useStore 钩子

import { createContext, useContext } from "react";

import …

我在我的项目中使用react-router-dom v6和mobex，当我使用它时出现错误，如下所示。

main.tsx：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app/layout/App'
import './app/layout/styles.css'
import 'semantic-ui-css/semantic.min.css'
import 'react-toastify/dist/ReactToastify.min.css'
import 'react-calendar/dist/Calendar.css'
import 'react-datepicker/dist/react-datepicker.css'
import { store, StoreContext } from './app/stores/store'
import { BrowserRouter } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';
export const navigate = useNavigate();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <StoreContext.Provider value={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </StoreContext.Provider>
  </React.StrictMode>
)

用户存储.ts：

import { UserFormValues } from './../models/user';
import { makeAutoObservable, runInAction } from "mobx";
import { User } from "../models/user"; …

我目前正在与React一起开发Electron应用程序。我偶然发现了MobX，想尝试一下，但是我的代码无法正常工作

我想使用MobX装饰器，但是当我尝试运行代码时，出现以下错误消息：

Leading decorators must be attached to a class declaration

我的应用程序将数据存储在nedb的数据存储中，我想用mobx观察它们。

因此，例如，如果我有以下代码：

import { observable } from 'mobx';
import Datastore from 'nedb';

@observable projectsDb = new Datastore({
    filename: __dirname + './projects.json',
    autoload: true,
    timestampData: true,
});

export default projectsDb;

启动电子应用程序时，请使用以下命令：

"browserify -t [ babelify --presets [ react es2015 stage-1] --plugins [transform-decorators-legacy] ] app/app.jsx -o app/js/app.js && stylus app/css/styles.styl -o app/css/styles.css && electron app/main.js",

还将所有devDepenendencies和Dependencies添加到我的package.json中。

我的“开始”命令是否有任何错误，或者此处对可观察的概念有任何误解？

提前致谢 ：）

我将mobX与React和Meteor结合使用,我需要能够将一个商店中保存的信息用于另一个商店.具体来说,我需要在商店B中引用商店A,以便调用商店A的操作,并通过订阅集合获取它已检索到的信息.我使用了@inject装饰器,但不知道如何调用该动作.谢谢

我有这个基本模型。

const stuff = types.model({
  term: types.string,
  excludeTerm: types.string,
  stores: types.array(types.string)
}).actions(self => ({
  setTerm(term: string) {
    self.term = term
  },
  setExcludeTerm(term: string) {
    self.excludeTerm = term
  },
  setStores(stores: string[]) {
    self.stores = stores   // <<< the lint error is on this line
  }
}))

我收到以下TS Lint错误：

Type 'string[]' is not assignable to type 'IMSTArray<ISimpleType<string>> & IStateTreeNode<IArrayType<ISimpleType<string>>>'. Type 'string[]' is missing the following properties from type 'IMSTArray<ISimpleType<string>>': spliceWithArray, observe, intercept, clear, and 4 more.ts(2322)

这是一个令人讨厌的错误。我可以这样分配来修复它：(self as any).stores = stores …