Component base
import React from "react";
import { css, cx } from "emotion";
import produce from "immer";

interface IProps {}

interface IState {}

export default class DiagramCard extends React.Component<IProps, IState> {
  constructor(props) {
    super(props);

    this.state = {};
  }

  immerState(f: (s: IState) => void) {
    this.setState(produce(f));
  }

  render() {
    return <div>card</div>;
  }
}
Copy
ImmerForm input field
{renderFormFieldInput({
  styleInput: { width: 200 },
  label: lang.scope,
  value: form.scope,
  showRequired: true,
  validationFailure: failures.scope,
  onChange: (value: string) => {
    console.log("edit scope", value);
  },
})}
Copy
immerState function
immerState(f: (s: IState) => void, cb?) {
  this.setState(produce(f), cb);
}

import produce from 'immer'
Copy
immerState with promise
  async immerState(f: (s:IState)=>void) {
    return new Promise((resolve) => {
      this.setState(produce(f), () => {
        resolve();
      });
    });
  }
Copy
mapStateToProps function
const mapStateToProps = (store:IReduxGlobalState, ownProps: IProps)=> {
  return {
    plants: store.globals.plants || []
  }
}

import {connect} from 'react-redux';

@connect(mapStateToProps)
Copy