The main content

  • Improve the project architecture
  • Define the store
  • Statement of the observer

Perfect project structure

For further expansion of the project, put all the data in the store/ directory. The current project structure is as follows:

src/
  App.js
  App.css
  index.js
  conponents/
  	(some components)
  containers/
  	(some containers)
  stores/
  	(some stores)
Copy the code

Let’s take a look at how to organize stores. Currently, it is organized by function. Currently, only scoring is developed, so there is only a scoreStore, and there will be a userStore to manage the data related to user logins, and so on.

Observable and Action are defined in scorestore.js as follows:

import { observable, action } from 'mobx';

class ScoreStore {
  / / data
  @observable score = 0;

  / / method
  @action setScore (score) {
    this.score = score
  }

}

export default new ScoreStore();
Copy the code

Used in the HomePage you will need to inject before the store, and add the observer modifications:


// HomePage.js

// Add mox-react correlation to a series of imports
import { inject, observer } from "mobx-react";

@inject ("scoreStore")
@observer
class HomePage extends Component {
  // Some code...

  // Use this.props when accessing data or methods of scoreStore
  this.props.scoreStore.setScore(score);
  // More code...
}
Copy the code

Other components that need to access the data are also modified so that when the data is modified, the global changes are made accordingly.

Refer to page

Github.com/gothinkster… The main reference is the store structure.

series

React + MobX + Electron + node. js + MongoDB full stack project development practice (zero) Introduction

React + MobX + Electron + node.js + MongoDB

Allow decorators