Однонаправленный поток данных в React с MobX

Я пытаюсь настроить архитектуру проекта с использованием 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, будет только одно хранилище.

Затем я использую 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);

Очевидно, что в моем приложении будет целая куча компонентов, но ни один из компонентов никогда не будет читать state напрямую из Store.js. Только мой App.js будет импортировать состояние и передавать его по дереву компонентов.

Еще одно замечание: я больше не уверен, почему другие компоненты не могут считывать состояние напрямую из _10 _...

Так обстоит дело с компонентом DisplayTitle:

import React, { Component } from 'react';

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

export default DisplayTitle;

Но, несмотря на то, что никакие другие компоненты не могут напрямую импортировать state (кроме App.js), любой компонент может импортировать actions из Store.js, чтобы изменить 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;

Есть ли какие-либо недостатки или другие очевидные причины, по которым этот подход не лучший вариант? Я хотел бы получить любую обратную связь!


reactjs javascript mobx ecmascript-6 mobx-react
person Community    schedule 21.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

тебе не хватает нескольких вещей

на корневом уровне:

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 и обновляются в вашем дереве рендеринга - поток более понятен.

person Dimitar Christoff    schedule 21.08.2017