React + Mobx + Webpack + Express (also supports client rendering)

At present, most websites still have a multi-page structure, but in fact, a website can be made into a SPA. For example, YouTube is a SPA. The company’s recent projects are in the form of single-page application rendered by react+ Mobx server. So I pulled the project out and got rid of the business code and kept a shelf to share.

Github address of the project

At present, Redux is the mainstream of React state management. Our company had a project that was also React + Redux. From my personal experience, MOBx is far more suitable and easier to use than Redux for most front-end application scenarios.

The effect

Log in, register

Add item to list

If the route does not have a page, process 404

How to use

git clone git@github.com:L-x-C/isomorphic-react-with-mobx.git
cd isomorphic-react-with-mobx
npm installCopy the code

Dev (Client rendering)

npm start
open http://localhost:3000Copy the code

Production (Server-side rendering)

npm run server
open http://localhost:20000Copy the code

Some of the things that you see all the time

How do I get data from the server?

Add an onEnter to each component and handle it with a promise that initiates an action that changes the states value in the MOBx

@action
static onEnter({states, pathname, query, params}) {
    return Promise.all([
      menuActions.setTDK(states, 'list'),
      jobActions.fetchJobList(states, query)
    ]);
}Copy the code

This is possible because there is an onEnter preprocessing in serverRender that executes the methods in the innermost onEnter from the outermost layer based on the nesting of the Component

import async from 'async';

export default (renderProps, states) => {
  const params = renderProps.params;
  const query = renderProps.location.query;
  const pathname = renderProps.location.pathname;

  let onEnterArr = renderProps.components.filter(c => c.onEnter);
  return new Promise((resolve, reject)= > {
    async.eachOfSeries(onEnterArr, function(c, key, callback) {
      let enterFn = c.onEnter({states, query, params, pathname});
      if (enterFn) {
        enterFn.then(res => {
          if (res) {
            //Handle Promise callback execution, such as logging in res.foreach ((fn)= > {
              if (Object.prototype.toString.call(fn) === '[object Function]') { fn(); }}); }if (key === (onEnterArr.length - 1)) {
            resolve();
          }

          callback();
        }).catch(err => {
          reject(err);
        });
      } else{ callback(); }}); }); };Copy the code

How to set TDK (title, description, keywords) on the server?

OnEnter has a setTDK(States, t, d, k) method that sets the value of TDK

How do I jump to the server?

In the browser environment, we can set window.location.href = URL to jump. However, in the server environment, there are no window and document objects, so we throw an exception in the server environment, and after catching the 302 jump. See redirect function in SRC /helpers/location.js, which automatically determines which redirect to use based on the current environment

import {redirect} from './helpers/location';

@action
static onEnter({states, query, params}) {
    redirect('http://www.xxx.com');
}Copy the code

The principle and use of MOBx will not be described in detail here, there are many online search. I believe that some of the methods we use may not be the most perfect solution, if there is a better way to discuss github issue, learn from each other ~ the project address is here