使用React,Redux和TypeScript mapDispatchToProps的方法更短？

Question

我正在尝试一起使用React,Redux和TypeScript时如何减少样板量.可能你不能在这种情况下,但想看看是否有人有想法.

我目前有一个组件调度一个切换菜单的动作,在显示和隐藏它之间交替.要做到这一点,我已经为我的类定义了这样的东西(省略与state相关的代码,专注于调度动作):

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

感觉应该可以减少在此完成目标所需的代码量.作为React,Redux和TypeScript的新手,我无法确切地看到它.具体来说,反复编写动作名称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 
};

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

Answer 2

mapDispatchToProps将接受一个动作创建者的对象而不是一个函数,并自动将它们全部绑定到dispatch.

来自文档:

如果传递了一个对象,则其中的每个函数都被假定为Redux动作创建者.一个具有相同函数名称的对象,但每个动作创建者都被包装到一个dispatch调用中,因此它们可以被直接调用,它们将被合并到组件的道具中

这允许您将其重写为:

const mapDispatchToProps = { 
  toggleMenu 
};

注意:我不确定你需要在typescript中输入(如果有的话).