Как передать объект преобразователю в машинописный текст - PullRequest
Новая
       67

Как передать объект преобразователю в машинописный текст

1 голос
/ 20 июня 2020

Вот пример с единственным свойством - «сообщение» - переданным преобразователю:

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

Ответы [ 2 ]

0 голосов
/ 21 июня 2020

хорошо, я создал пример, чтобы облегчить понимание проблемы.

actions.tsx - похоже, прошло - (спасибо, МухаммадУмарФарук - за ваш ответ на мой вопрос.)

* 1004 Компонент *

, использующий создателя действия - вот проблема: 

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

  • Ошибка - ac Пример: Ожидаемые 3 аргумента

  • Ошибка - (myComponent):

TypeScript Аргумент типа F C не может быть назначен параметру типа ComponentType недействителен; }, форма >> '. Тип FunctionComponent нельзя присвоить типу FunctionComponent недействителен; }, форма >> '. Типы свойств propTypes несовместимы. Введите WeakValidationMap | undefined 'не может быть назначен типу' WeakValidationMap недействителен; }, форма >> | undefined '. Тип WeakValidationMap нельзя присвоить типу WeakValidationMap. недействителен; }, форма >> '. Типы свойства acExample несовместимы. Введите валидатор > | undefined 'не может быть назначен типу' Validator <(payload: shapePayload) => void> | undefined '. Введите валидатор > 'не может быть назначен типу' Validator <(payload: shapePayload) => void> '. Тип ThunkAction 'не присваивается типу' (payload: shapePayload) => void

0 голосов
/ 20 июня 2020

В случае 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')
}
...