更短的方式来使用反应，终极版和打字稿mapDispatchToProps？(Shorter way

我试图找出如何使用反应，终极版和打字稿在一起时减少样板数量。 这可能是你不能在这种情况下，但想看看是否有人有想法。

我目前有分派该切换的菜单，在显示和隐藏它之间交替的动作的部件。 要做到这一点，我定义我的课是这样的（涉及国家省略代码，注重行动的调度）：

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))});

的动作被定义为

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

这感觉就像它应该是可以减少的代码来实现在这里我的目标所需要的量。 作为新的反应，终极版和打字稿我看不出究竟如何，但。 特别是它给人的感觉非常的重复写操作名称，toggleMenu，一遍又一遍。 例如，在这部分两次：

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

任何建议表示赞赏！

Answer 1:

有一个较短的方式。 您可以简化很多你的代码。

动作 - 原创

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 IConnectedDispatch {
  toggleMenu: (isActive: boolean) => Action;
}

属性界面 - 减少

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 
};

我可以推荐这个库打字稿-FSA 。 它有助于减少大量的行动，尤其是那些异步创建样板。

Answer 2:

mapDispatchToProps将接受的行动，而不是创造者的函数的对象，并自动绑定所有的人都来dispatch 。

从文档 ：

如果对象被传递，则假定在其内部的各功能是一个终极版动作创建者。 具有相同功能名称的对象，但每一个行动的创建者裹成一个dispatch呼叫，使他们可以直接调用，将被合并到组件的道具

这允许您将它改写为：

const mapDispatchToProps = { 
  toggleMenu 
};

注：我不知道你会需要在打字稿这键入（如果有的话）是什么。

文章来源: Shorter way to mapDispatchToProps using React, Redux and TypeScript?