reactjs - 使用 React、Redux 和 TypeScript 映射 DispatchToProps 的更短方法？

Question

我正在尝试找出在同时使用 React、Redux 和 TypeScript 时如何减少样板文件的数量。在这种情况下您可能做不到，但想看看是否有人有想法。

我目前有一个组件可以调度切换菜单的操作，在显示和隐藏菜单之间交替。为此，我定义了我的类，如下所示(省略与状态相关的代码，专注于 Action 的调度):

import {Action, toggleMenu} from "../../actions/index";    

interface IConnectedDispatch {
  toggleMenu: (isActive: boolean) => Action;
}

class HeaderMenu extends React.Component<IOwnProps & IConnectedState & IConnectedDispatch, any> {

  constructor(props: IOwnProps & IConnectedState & IConnectedDispatch) {
    super(props);
    this.toggleMenuState = this.toggleMenuState.bind(this);
  }

  public render() {        
    return (
      <button className={buttonClass} onClick={this.props.toggleMenu(this.props.isActive)} type="button">
      </button>
    );
  }
}

const mapDispatchToProps = (dispatch: redux.Dispatch<Store.All>): IConnectedDispatch => ({
  toggleMenu: (isActive: boolean) => dispatch(toggleMenu(isActive))});

Action 定义为

export function toggleMenu(isActive: boolean): Dispatch<Action> {
  return (dispatch: Dispatch<Action>) => {
    dispatch({
      isActive,
      type: "TOGGLE_MENU",
    });
  };
}

感觉应该可以减少实现我的目标所需的代码量。作为 React、Redux 和 TypeScript 的新手，我看不出到底是怎么回事。具体来说，一遍又一遍地写操作名称 toggleMenu 感觉非常重复。例如这部分的两次:

const mapDispatchToProps = (dispatch: redux.Dispatch<Store.All>): IConnectedDispatch => ({
  toggleMenu: (isActive: boolean) => dispatch(toggleMenu(isActive))});

感谢任何建议!

Answer 1

还有一条更短的路。您可以简化很多代码。

Action - 原创

export function toggleMenu(isActive: boolean): Dispatch<Action> {
  return (dispatch: Dispatch<Action>) => {
    dispatch({
      isActive,
      type: "TOGGLE_MENU",
    });
  };
}

行动 - 减少

export const toggleMenu = (isActive: boolean) => ({
  isActive,
  type: "TOGGLE_MENU"
})

属性接口(interface) - 原创

interface IConnectedDispatch {
  toggleMenu: (isActive: boolean) => Action;
}

属性接口(interface) - 简化

import { toggleMenu } from "./actions"
interface IConnectedDispatch {
  toggleMenu: typeof toggleMenu
}

MapDispatch - 原创

const mapDispatchToProps = (dispatch: redux.Dispatch<Store.All>): IConnectedDispatch => ({
  toggleMenu: (isActive: boolean) => dispatch(toggleMenu(isActive))});

MapDispatch - 简化

const mapDispatchToProps = { 
  toggleMenu 
};

我可以推荐这个图书馆 typescript-fsa .它有助于减少由操作创建的大量样板，尤其是异步操作。