reactjs - 使用 mobx 创建多个商店并将其注入(inject)到组件中的正确方法 - ReactJs

Question

正如 Mobx documentation 中所建议的那样我通过以下方式创建了多个商店:

class bankAccountStore {
  constructor(rootStore){
    this.rootStore = rootStore;
  }
...

class authStore {
  constructor(rootStore){
    this.rootStore = rootStore;
  }
...

最后通过以下方式创建根存储。另外I prefer在主存储构造函数中构建子存储。此外，我发现有时我的子存储必须观察父存储中的一些数据，所以我将其传递给子构造函数

class RootStore {
  constructor() {
    this.bankAccountStore = new bankAccountStore(this);
    this.authStore = new authStore(this);
  }
}

通过以下方式提供给应用程序:

<Provider rootStore={new RootStore()}>
  <App />
</Provider>

并注入(inject)组件，如下所示:

@inject('rootStore') 
@observer
class User extends React.Component{
  constructor(props) {
    super(props);
    //Accessing the individual store with the help of root store
    this.authStore = this.props.rootStore.authStore;
  }
}

问题 1:即使组件需要根存储的一部分，这是否是每次将根存储注入(inject)组件的正确且最有效的方法？

问题 2:如果没有，将身份验证存储注入(inject)用户组件的最佳方法是什么？

编辑:我已经做出了总结 github 讨论的答案。答案中提供的讨论链接

Answer 1

这个答案可能有些固执己见，但它可能会间接帮助社区。
经过大量研究，我看到了许多人在实践中使用的以下方法。一般方法 有一个根存储，可以充当存储之间的通信 channel 。

问题 1:组织存储并将其注入(inject)组件的最佳方式是什么？

方法 1:

App.js

// Root Store Declaration
class RootStore {
    constructor() {
      this.userStore = new UserStore(this);
      this.authStore = new AuthStore(this);
    }
}    
const rootStore = new RootStore()

// Provide the store to the children
<Provider 
    rootStore={rootStore}
    userStore={rootStore.userStore}
    authStore={rootStore.authStore}
>
  <App />
</Provider>

Component.js

// Injecting into the component and using it as shown below
@inject('authStore', 'userStore')
@observer
class User extends React.Component {
    // only this.props.userStore.userVariable
}

方法 2:

App.js

class RootStore {
    constructor() {
      this.userStore = new UserStore(this);
      this.authStore = new AuthStore(this);
    }
} 
const rootStore = new RootStore()

<Provider rootStore={rootStore}>
  <App />
</Provider>

Component.js

// Injecting into the component and using it as shown below
@inject(stores => ({
    userStore: stores.userStore,
    authStore: stores.authStore,
    })
)
@observer
class User extends React.Component {
    // no this.props.rootStore.userStore,userVariable here, 
    // only this.props.userStore.userVariable
}

除了语法差异之外，方法 1 和方法 2 没有任何区别。好的!那是注入(inject)部分!

问题 2:商店之间沟通的最佳方式是什么？ (尽量避免)

Now I know a good design keeps stores independent andless coupled. But somehow consider a scenario where I want thevariable in UserStore to change if a certain variable in AuthStoreis changed. Use Computed. This approach is common for both the above approaches

AuthStore.js

export class AuthStore {    
    constructor(rootStore) {
        this.rootStore = rootStore
        @computed get dependentVariable() {
          return this.rootStore.userStore.changeableUserVariable;                                      
        }
    }
}

I hope this helps the community. For more detailed discussion you canrefer to the issue raised by me onGithub