In container file,Where is the arguments of composer function comes from?

[jingbo.wang]

In the container, newpost.js:

export const composer = ({context, clearErrors}, onData) => {
  const {LocalState} = context();
  const error = LocalState.get('SAVING_ERROR');
  onData(null, {error});

  // clearErrors when unmounting the component
  return clearErrors;
};

export const depsMapper = (context, actions) => ({
  create: actions.posts.create,
  clearErrors: actions.posts.clearErrors,
  context: () => context
});

I do not understand the {context, clearErrors} ,I guest that it should be

export const composer = ({context, actions}, onData) => {
  const {LocalState} = context();
  const error = LocalState.get('SAVING_ERROR');
  onData(null, {error});

  // clearErrors when unmounting the component
  return actions.post.clearErrors;
};

I think ,the arguments of composer function comes from the state(context 、actions) and props(via route):

FlowRouter.route('/post/:postId', {
    name: 'posts.single',
    action({postId}) {
      mount(MainLayoutCtx, {
        content: () => (<Post postId={postId}/>)
      });
    }
  });

The "clearErrors" in {context, clearErrors} ,Where are you from ?

[xcv58]

The clearErrors come from this file: https://github.com/mantrajs/mantra-sample-blog-app/blob/master/client/modules/core/actions/posts.js

This line will combine actions and context together.

[jingbo.wang]

@xcv58 I know that actions and context is in the container,but the clearnErrors in the https://github.com/mantrajs/mantra-sample-blog-app/blob/master/client/modules/core/actions/posts.js have the module namespace: https://github.com/mantrajs/mantra-sample-blog-app/blob/master/client/modules/core/actions/index.js

import posts from './posts';

export default {
  posts
};

And in Mantra-core API.js:

  _bindContext(_actions) {
    const actions = {};
    for (let key in _actions) {
      if (_actions.hasOwnProperty(key)) {
        const actionMap = _actions[key];
        const newActionMap = {};
        for (let actionName in actionMap) {
          if (actionMap.hasOwnProperty(actionName)) {
            newActionMap[actionName] =
              actionMap[actionName].bind(null, this.context);
          }
        }
        actions[key] = newActionMap;
      }
    }

    return actions;
  }

The key is the "module namespace".So, I will use it by "acions.posts.clearErrors", like the "Actions with the same export name will be overwritten #10":"Modules should be independent of each other so as action methods".

At the same time, this container ：newpost.js have the depsMapper functions whose argument is (context, actions),look here:

export const depsMapper = (context, actions) => ({
  create: actions.posts.create,
  clearErrors: actions.posts.clearErrors,
  context: () => context
});

It ues the "create" and "clearErrors" in the actions by the "module namespace:posts".

Why ?

[xcv58]

@norain2050 You are misunderstanding how compose get props. The compose function's first argument is props. The props is whatever props the parent pass to the container, plus the result of depsMapper.

The idea is that you don't need to pass all actions to the component, you can only pass necessary action(s) to your component. The depsMapper will do this for you and eliminate the long namespace.

You can take a look at my implementation: https://github.com/ops-class/test161-web-ui/blob/master/app/src/client/modules/core/containers/submissionlist.js#L4-L45

[jingbo.wang]

@xcv58 Thank you very much.Now, I had understanded it.