MobX在React中的單向數據流

Question

我正在嘗試使用MobX和React設置項目體系結構，並且想知道是否將以下內容視為“不錯”。 我不希望這個問題最終成為另一個問題，“這是個人喜好，因此，這個問題不屬於這里……我們都可以同意，有些事情確實很糟糕。

所以我在考慮只擁有一個看起來像這樣的Store.js文件：

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

useStrict(true);

export const state = observable({
    title: ''
});

export const actions = {
    setTitle: action((title) => {
        state.title = title;
    })
};

注意 ：所有應用程序狀態都將處於state ，只有一個存儲。

然后，在根組件aka App.js使用state ， App.js所示：

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { state } from './Store';
import DisplayTitle from './components/DisplayTitle/DisplayTitle';
import SetTitle from './components/SetTitle/SetTitle';

class App extends Component {

  render() {
    return (
      <div className="App">
        <DisplayTitle title={state.title}/>
        <SetTitle />
      </div>
    );
  }

}

export default observer(App);

很明顯，我的應用程序中會包含很多組件，但是沒有一個組件會直接從Store.js讀取state 。 只有我的App.js會導入狀態並將其傳遞到組件樹下。

另一個注意事項 ：我不太確定為什么其他組件不能直接從Store.js讀取狀態...

DisplayTitle組件就是這種情況：

import React, { Component } from 'react';

class DisplayTitle extends Component {
    render () {
        return (
            <h1>{this.props.title}</h1>
        );
    }
}

export default DisplayTitle;

但是，即使沒有其他組件可以直接導入state （ App.js除外），任何組件都可以從Store.js導入actions以使state發生突變。

例如在SetTitle組件中：

import React, { Component } from 'react';
import { actions } from './../../Store';

class SetTitle extends Component {

    updateTitle (e) {
        actions.setTitle(e.currentTarget.value);
    }

    render () {
        return (
            <input onChange={this.updateTitle} type='text'/>
        );
    }
}

export default SetTitle;

是否有任何缺陷或其他明顯的原因導致這種方法不是最佳選擇？ 我希望收到所有反饋！

Answer 1

你缺少一些東西

在根級別：

import { Provider } from 'mobx-react'
...

<Provider state={state}>
  <Other stuff />
</Provider>

在組件級別：

import { inject } from 'mobx-react'

@inject('state')
class Foo ... {
  handleClick(){
    this.props.state.setTitle('foo')
  }
  render(){
    return <div onClick={() => this.handleClick()}>{this.props.state.title}</div>
  }
}

您只能在提供程序中粘貼接口actions={actions}並將其注入，以確保子代可以調用您的API方法來改變狀態並使狀態自下而上流動。 盡管如果直接對其進行突變，則不會發生任何副作用，因為所有組件都將在渲染樹中進行willReact和更新-通量更willReact推理。