mobx我使用以下方式创建了一个商店：
import {extendObservable} from 'mobx';
class InfluencerFeedStore {
constructor() {
extendObservable(this, {
data: []
});
}
setData(items = []) {
this.data = items;
}
}
export default new InfluencerFeedStore();
然后我在我的 React 视图中观察该商店：
import React from 'react';
import {observer} from 'mobx-react';
import FeedItem from './FeedItem';
import InfluencerFeedStore from '../../core/stores/InfluencerFeed';
import './style.css';
const generateItems = () => {
return InfluencerFeedStore.data.map((item, i) => (
<FeedItem key={`feeditem-${i}`} {...item} />
));
};
const Feed = () => (
<div className="Feed vertical-scroll-flex-child">
{generateItems()}
</div>
); …可观察到的现象在幕后到底是什么样子的？属性如何变得可观察？这到底意味着什么？找不到不使用 ES.next 装饰器的明确解释。谢谢！
我正在使用 MobX 存储来保存一些用户身份验证数据作为可观察数据。我想访问一些我想在组件的注入/观察者模式之外运行的函数的数据。这样做明智吗？
例如，身份验证函数如下：
function authMe() { ...access mobx data here to perform conditional logic}
伙计们。\n我正在开发 ract+mobx+firebase 应用程序。\n我想将我的应用程序逻辑分为 3 个商店：
\n\n因此，要从 db 接收 currentUser 数据，我首先需要从fb.auth()获取currentUser.uid。\n我的AuthStore如下所示：
\n\nclass AuthStore {\n @observable auth = {\n authUser : null,\n authError : null\n };\n\n constructor () {\n console.log ( \'start auth\' );\n this.unwatchAuth = Fb.auth.onAuthStateChanged ( user => {\n console.log ( \'status changed\' );\n this.auth.authUser = user;\n } );\n }\n\n @computed\n get currentUser () {\n …自动运行和反应必须在构造函数内部才能工作吗？我可以在没有构造函数的情况下编写这个简单的示例吗？
另外，我在自动运行中的代码可以正常运行，但如果我将其更改为console.log(this.expenses)它就不起作用。这是为什么？
import { observable, action, computed, useStrict, autorun, reaction } from 'mobx'
useStrict(true)
class ExpensesStore {
@observable.shallow expenses = []
@action addExpense = (expense) => {
this.expenses.push(expense)
}
@computed get getExpense() {
if(this.expenses.length > 0) {
return `This is computed from ${this.expenses[0] + this.expenses[1]}`
}
}
constructor() {
autorun(() => {
console.log(`${this.expenses}`)
})
reaction(
()=>this.expenses.map(expense => expense), expense => console.log(expense)
)
}
}
const store = window.store= new ExpensesStore() …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。如果语言更改了如何重新渲染组件以反映语言更改。
android react-native mobx react-native-android react-native-ios
我需要在 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", …mobx ×10
reactjs ×7
javascript ×6
mobx-react ×4
react-native ×2
android ×1
autorun ×1
firebase ×1
react-router ×1