Question

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

我目前有一个组件调度切换菜单的动作，在显示和隐藏它之间交替。要做到这一点，我已经为我的课程定义了这样的东西（省略与州有关的代码，专注于调度行动）：

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

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

From the docs：

如果传递了一个对象，则假定其中的每个函数都是Redux动作创建者。具有相同功能名称的对象，但每个动作创建者都被包含在dispatch调用中以便可以直接调用它们，它们将被合并到组件的道具中

这允许您将其重写为：

const mapDispatchToProps = { 
  toggleMenu 
};

注意：我不确定你需要在打字稿中输入（如果有的话）。

Answer 2

有一种更短的方式。您可以简化许多代码。

行动 - 原始

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。它有助于减少由操作创建的大量样板，尤其是异步。

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

2 个答案: