标签: mobx

我目前正在尝试实现一个 mobx 存储，我可以像这样从任何地方调用它：

import {userStore} from '../UserStore.js';

在文件末尾，我的导出功能如下所示：

const userStore = new UserStore();
export {userStore};

据我了解，每次调用该import功能时，都会重新创建该对象，其中导入 UserStore 的多个文件不共享相同的变量。

但是，我希望UserStore导入的每个文件都使用完全相同的变量导入相同的对象。我怎样才能做到这一点？我不完全确定如何实现，因此将不胜感激任何想法和示例:)

完整代码（用于 UserStore.js 声明），如果有帮助，如下（查看最底部的 export 语句）

import {observable, computed, action} from 'mobx';
import {ObservableMap, toJS} from 'mobx';
import {Fb} from './firebase.js';

class UserStore {

  /** GPS */
  @observable usrLng = 0.0;
  @observable usrLat = 0.0;
  @observable watchID = null;

  @action
  watchCurLocation() {
    this.watchID = navigator.geolocation.watchPosition((position) => {
      console.log("Recording GPS data from within the Store!!");
      this.usrLat = parseFloat(position.coords.latitude);
      this.usrLng …

我的 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 和 Mobx 的新手，所以我尝试做一个小应用程序。当我尝试运行它时，我收到错误：Uncaught TypeError: _releasesState2.default is not a constructor. 因为我不知道问题是什么，所以我要猛烈抨击我的头。这是我到目前为止所得到的：

我的 index.js：

import React from "react";
import ReactDOM from "react-dom";

import Releases from "./components/releases";

class App extends React.Component {
  constructor() {
    super();
  } 
  render() {
    return (
        <div>
           <Releases />
        </div>
     )
  }
}

ReactDOM.render(<App/>, window.document.getElementById("app"));

release.js：

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

import ReleaseState from "./releases-state";

@observer
export default class Releases extends React.Component {
   constructor() {
     super();

    this.state = new ReleaseState(); …

我收到错误：测试套件运行失败：意外的令牌 (5:0)

3 | import Locale from '../stores/view/language'
4 |
5 | @observer
  | ^
6 | export default class DateFormat extends Component {
7 |   constructor(props) {
8 |     super(props)

我使用 Webpack + Babel + Jest + Enzyme + React + Mobx

这是我的一些 package.json

{
  "scripts": {
    "test": "jest",
  },
  "devDependencies": {
    "babel-eslint": "8.0.1",
    "babel-jest": "21.2.0",
    "enzyme": "3.1.0",
    "enzyme-adapter-react-16": "1.0.2",
    "jest": "21.2.1",
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ],
    "env": {
      "test": {
        "presets": [
          "env",
          "react"
        ] …

If I push a class instance into an observable array in MobX then it is not observed. However if I push a literal object into an observable array then it will be observed.

The docs for observable arrays say that

"all (future) values of the array will also be observable"

so I am trying to understand why this happens.

For example the following code can be run in node:

let mobx = require('mobx');

class TodoStore {
  constructor() {
    this.todos = …

当用户选择语言时，我试图在运行时更改我的应用程序的语言。我正在尝试这样做

import I18n from 'react-native-i18n'

onChangeLanguage = () => {
    console.log('String before change : >>> ', I18n.t('welcome'))
    I18n.locale = 'hi'
    console.log('String after change : >>> ', I18n.t('welcome'))
}

在两个日志中，我得到了相同的 string 。我从这里参考。在此参考中，有一个使用 redux 的示例，但我的用例是使用 mobx。如果语言更改了如何重新渲染组件以反映语言更改。

我需要在 React Native 中保留一个 MST Store。数据很少更改。

我对使用 AsyncStorage 和 AutoRun 感到困惑。

我有一个 React 组件，它接收用户名和密码并将其发送以进行身份​​验证。如果身份验证成功，页面应该移动到呈现另一个组件的不同路由。

现在的问题是，我不确定如何从我的商店更改路线？即不使用<Link>React Router的组件？我知道我们可以使用this.props.history.push(/url)以编程方式更改路由，但它只能在 React 组件中使用 using <Route>，而不能在商店中使用。

我使用 React16 和 MobX 进行状态管理，使用 ReactRouter V4 进行路由。

店铺：

class Store {
    handleSubmit = (username, password) => {
        const result = validateUser(username, password);
        // if result === true, change route to '/search' to render Search component
    }
}

登录组件：

const Login = observer(({ store }) => {
    return (
        <div>
           <form onSubmit={store.handleSubmit}>
                <label htmlFor="username">User Name</label>
                <input type="text" id="username" onChange={e => store.updateUsername(e)} value={store.username} />
                <label htmlFor="password">Password</label>
                <input …

我配置了 package.json 和 babelrc，但是在使用装饰器时出现了一些错误。

我使用“react16.8.1”和“mobx5.9.4”。

我的 babelrc 代码：

    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",

    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-transform-object-assign",
        [
           "@babel/plugin-decorators-legacy",
            {
          "legacy": true
            }
        ],


    ]
}```
and my package.json

{
  "name": "material-dashboard-pro-react",
  "version": "1.5.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "3.9.2",
    "@material-ui/icons": "3.0.2",
    "axios": "^0.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "chartist": "0.10.1",
    "history": "4.7.2",
    "mobx": "^5.9.4",
    "mobx-react": "^5.4.3",
    "moment": "2.24.0",
    "moment-jalaali": "^0.8.3",
    "node-sass": "4.11.0",
    "nouislider": "13.1.0",
    "perfect-scrollbar": "1.4.0",
    "rc-pagination": "^1.17.13",
    "react": "16.8.1",
    "react-big-calendar": "0.20.3",
    "react-bootstrap-sweetalert": "4.4.1",
    "react-chartist": "0.13.3",
    "react-datetime": "2.16.3",
    "react-dom": "16.8.1",
    "react-google-maps": "9.4.5", …