如何在打字稿中为 thunk 提供对象

Question

这里有一个带有单个属性的示例 - “消息” - 提供给 thunk：

https://redux.js.org/recipes/usage-with-typescript

// src/thunks.ts

import { Action } from 'redux'
import { sendMessage } from './store/chat/actions'
import { RootState } from './store'
import { ThunkAction } from 'redux-thunk'

export const thunkSendMessage = (
  message: string
): ThunkAction<void, RootState, unknown, Action<string>> => async dispatch => {
  const asyncResp = await exampleAPI()
  dispatch(
    sendMessage({
      message,
      user: asyncResp,
      timestamp: new Date().getTime()
    })
  )
}

function exampleAPI() {
  return Promise.resolve('Async Chat Bot')
}

如何编写相同的示例但提供一个对象 - “{message}”

// src/thunks.ts

import { Action } from 'redux'
import { sendMessage } from './store/chat/actions'
import { RootState } from './store'
import { ThunkAction } from 'redux-thunk'

export const thunkSendMessage = ({
  message: string
}): ThunkAction<void, RootState, unknown, Action<string>> => async dispatch => {
  const asyncResp = await exampleAPI()
  dispatch(
    sendMessage({
      message,
      user: asyncResp,
      timestamp: new Date().getTime()
    })
  )
}

function exampleAPI() {
  return Promise.resolve('Async Chat Bot')
}

Answer 1

在 ES6 的情况下，您只需从消息对象参数中删除数据类型（字符串）。

// src/thunks.ts

import { Action } from 'redux'
import { sendMessage } from './store/chat/actions'
import { RootState } from './store'
import { ThunkAction } from 'redux-thunk'

interface Message {
messageText : string,
//...other properties if required ...
}

export const thunkSendMessage = (
  message : Message
): ThunkAction<void, RootState, unknown, Action<string>> => async dispatch => {
  const asyncResp = await exampleAPI()
  dispatch(
    sendMessage({
      message: message.messageText,
      user: asyncResp,
      timestamp: new Date().getTime()
    })
  )
}

function exampleAPI() {
  return Promise.resolve('Async Chat Bot')
}

Answer 2

好的，我已经创建了一个示例，以便更容易理解问题。

actions.tsx - 这似乎通过了 - （感谢 MuhhammadUmarFarooq - 你对我的问题的回答。）

import {RootState} from 'src/index';
import { Action } from 'redux'
import { ThunkAction } from 'redux-thunk';
import { actionTypes as at } from './actionTypes';

type shapePayload = {
  message: string
};

const acExample = (
  payload: shapePayload
): ThunkAction<void, RootState, unknown, Action<string>> => dispatch => {
  const {message} = payload;
  return dispatch({
    type: at.AC_TYPE_EXAMPLE,
    payload: {
      message,
      somethingelse: true
    }
  });
}

export type shapeExample = ReturnType<typeof acExample>;

export {
  acExample
};

组件使用动作创建器 - 这是这里的问题：

import React, {FC} from 'react';
import { connect } from 'react-redux';
import {shapeExample, acExample} from 'src/store/examples/actions';

type shape = {
  acExample: shapeExample
}
const myComponent:FC<shape> = ({acExample}) => (
  <button onClick={() => {
    acExample({message: 'cheese'});
  }} >
    trigger store update
  </button>
);

export default connect(
  () => ({}),
  {
    acExample
  }
)(myComponent);

• 错误 - acExample： 预期 3 个参数

• 错误 - (myComponent)：

“FC”类型的 TypeScript 参数不可分配给“ComponentType void; }，形状>>'。类型 'FunctionComponent' 不可分配给类型 'FunctionComponent void; }，形状>>'。属性“propTypes”的类型不兼容。键入'弱验证映射 | undefined' 不可分配给类型 'WeakValidationMap void; }, 形状>> |不明确的'。类型 'WeakValidationMap' 不可分配给类型 'WeakValidationMap void; }，形状>>'。属性“acExample”的类型不兼容。类型 'Validator> | undefined' 不可分配给类型 'Validator void> |不明确的'。类型 'Validator>' 不可分配给类型 'Validator void>'。类型 'ThunkAction' 不可分配给类型 '(payload: shapePayload) => void