Mobx-state-tree: `process` is a very bad function name

Created on 22 Sep 2017 · 15Comments · Source: mobxjs/mobx-state-tree

Hello. Recently I faced with a bug in my code that I can't make ReactHotLoader work because it uses process.env.NODE_ENV global variable to check an environment. But if you have import { process } from 'mobx-state-tree' require, webpack fails to inline process.env.NODE_ENV variable.

This is very bad because a lot of people may face it and it's really hard to understand what is going on.

Source

s-panferov

👍5

Most helpful comment

in my case what i'm using is a map function to process:

import { process as co } from 'mobx-state-tree';
const mapToProcess = (props = {}) => {
  return Object.keys(props).reduce((result, key) => {
    if (
      props[key].constructor &&
      props[key].constructor.name === 'GeneratorFunction'
    ) {
      result[key] = co(props[key]);
      return result;
    }

    result[key] = props[key];
    return result;
  }, {});
};

so in your actions definition you can do this:

...
.actions(self => mapToProcess({
  changeName(name) {
    ...
  },
  *fetchRandomName() {
    ...
  }
}))

tinchoz49 on 24 Sep 2017

👍4

All 15 comments

I think the same as you. What I'm doing to solve the problem is using
import { process as co } from 'mobx-state-tree'

tinchoz49 on 22 Sep 2017

fromGeneratorToAsync

aretecode on 23 Sep 2017

What if it was renamed to fromGeneratorToAsync as suggested by @aretecode, but it was implied by using a generator function in actions.

types
  .model({
    name: 'default'
  })
  .actions(self => ({
    changeName(name) {
      self.name = name
    },
    *fetchRandomName() { 
      const response = yield axios('.....')
      self.name = response.data
    }
  }))

instead of

  types
    .model({
      name: 'default'
    })
    .actions(self => ({
      changeName(name) {
        self.name = name
      },
      /* this would replace 'process', and would still be valid, but verbose */
      fetchRandomName: fromGeneratorToAsync(function* () { 
        const response = yield axios('.....')
        self.name = response.data
      })
    }))

This can be detected by checking the constructor name:

(function a() {}).constructor.name  // => "Function"
(function* b() {}).constructor.name  // => "GeneratorFunction"

nickbreaton on 23 Sep 2017

🎉1

@nickbreaton In the past it worked like that, but was changed due to problems imlied by transpilation. See #279.

mattiamanzati on 23 Sep 2017

👍1

@mattiamanzati Sorry about that I checked Babel, but not TS.

I'm just spit balling, but what about something like this?

types
.model({ name: '' })
.actions(self => ({
  changeName(name) {
    self.name = name
  }
}))
.processes(self => ({
  *fetchRandomName() {
    // ...
  }
}))

It would allow people to avoid importing process.

nickbreaton on 23 Sep 2017

Could potentially be a solution, I would like more something like

.compose(processes(self =>({
....
})

so that eventually other community-provided model enhancer could be provided.

mattiamanzati on 23 Sep 2017

Personally I would be in favor of adding both .processes and .compose. One shortcoming of Redux, IMO, is that there is no baked in solution to async actions. I think .processes would show the "blessed" way of doing async actions out of the box, and .compose would be there for anyone else wanting to provide a model enhancer.

nickbreaton on 23 Sep 2017

in my case what i'm using is a map function to process:

import { process as co } from 'mobx-state-tree';
const mapToProcess = (props = {}) => {
  return Object.keys(props).reduce((result, key) => {
    if (
      props[key].constructor &&
      props[key].constructor.name === 'GeneratorFunction'
    ) {
      result[key] = co(props[key]);
      return result;
    }

    result[key] = props[key];
    return result;
  }, {});
};

so in your actions definition you can do this:

...
.actions(self => mapToProcess({
  changeName(name) {
    ...
  },
  *fetchRandomName() {
    ...
  }
}))

tinchoz49 on 24 Sep 2017

👍4

The problem of some of the above proposed solutions is that they don't support non-exposed processes (processed that are only available in the closure). I think a nice alias for process should solve that. E.g.:

co
routine
story
flow
saga (lol)

Personally I like flow best

mweststrate on 25 Sep 2017

Flow is a very good one!

mattiamanzati on 25 Sep 2017

👍1

any tools out there that secretly inject flow globals :-P ?

Op ma 25 sep. 2017 om 12:00 schreef Mattia Manzati <[email protected]

:

Flow is a very good one!

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx-state-tree/issues/399#issuecomment-331835010,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABvGhC7PD4yC1SVtnenldkG95XoLDMKxks5sl3m4gaJpZM4PhHBO
.

mweststrate on 25 Sep 2017

😄2

I personally think that having both process and flow (or whatever name is decided on) could be confusing to users. Also, a flow would then have event types that are prefixed with process_.

I would be in favor of renaming process to flow, and all subsequent variable / type names.

Either way, I would love to help contribute to such an awesome project!

nickbreaton on 26 Sep 2017

how about asyncAction?