使用 React、Redux 和 TypeScript 映射DispatchToProps 的更短方法? [英] Shorter way to mapDispatchToProps using React, Redux and TypeScript?

问题描述

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

I'm trying to figure out how to reduce the amount of boilerplate when using React, Redux and TypeScript together. It might be that you can't in this case, but wanted to see if anyone has ideas.

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

I currently have a component that dispatches an action that toggles a menu, alternating between showing and hiding it. To do this I've defined my class something like this (omitting code related to state, focusing on the dispatching of 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))});

动作定义为

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

感觉应该可以减少实现我的目标所需的代码量.作为 React、Redux 和 TypeScript 的新手，我看不出究竟是怎么回事.具体来说就是一遍遍的写动作名，toggleMenu，感觉很重复.例如这部分的两次:

It feels like it should be possible to reduce the amount of code required to accomplish my goal here. Being new to React, Redux and TypeScript I fail to see exactly how though. Specifically it feels very repetitive to write the action name, toggleMenu, over and over. For example twice in this part:

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

感谢任何建议！

推荐答案

有一个更短的方法.您可以简化很多代码.

There is a shorter way. You can simplify a lot of your code.

动作 - 原创

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 - 原始

MapDispatch - Original

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

MapDispatch - 减少

MapDispatch - Reduced

const mapDispatchToProps = { 
  toggleMenu 
};

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

I can recommend this library typescript-fsa. It helps reduce a lot of boilerplate created by actions, especially async ones.

这篇关于使用 React、Redux 和 TypeScript 映射DispatchToProps 的更短方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！