如何将内部setState函数重构为静态类方法?

时间:2018-10-09 17:51:32

标签: javascript reactjs functional-programming refactoring currying

我想将fn的内部this.setState(fn)重构为位于UtilsUtils.createTargetDict内部的静态方法。我无法确定如何将target的{​​{1}}参数的参数放入新创建的register中。我这是一种FP技术,需要使用curry,但我无法弄清楚。

Utils.createTargetDict

发件人:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {targets: {}}
  }

  get engine() {
    return {
      state: this.state,
      register: target => {
        this.setState(ps => {
          return {
            targets: {
              ...ps.targets,
              ...Utils.createElement(target),
            },
          };
        });
      },
    }
  }
}

const myComp = new MyComponent();
const engi = myComp.engine;
engi.register({current: {foo: '1', bar: 'a'}}); 

收件人:

register: target => {
  this.setState(ps => {
    return {
      targets: {
        ...ps.targets,
        ...Utils.createElement(target),
      },
    };
  });
},

register: target => { this.setState(Utils.createTargetDict); },

Utils

1 个答案:

答案 0 :(得分:1)

您可以将函数封装在闭包中以执行此操作(注意,我已稍微更改了方法名称以表明我们正在生成函数):

MyComponent

register: target => {
  this.setState(Utils.getCreateTargetDict(target));
},

实用程序

class Utils {
  static getCreateTargetDict(target) {
    return (ps) => {
      return {
        targets: {
          ...ps.targets,
          ...Utils.createElement(target),
        },
      };
    };
  }
}