如何在反应动作中编写类型脚本

Question

这是我的动作文件，它是。js文件

export const fetchData = () => (dispatch, getState, apolloClient) => {
dispatch({ type: FETCH_DATA });
apolloClient
.query({
query: TEST_GQL,
variables: {
limit: 100,
},
})
.then((res) => {
const data = res.data;
if (data.error) {
return dispatch({
type: ERROR_FETCHING_DATA,
payload: data.error,
});
}
return dispatch({
type: FETCHED_DATA,
payload: data.data,
});
})
.catch((err) => dispatch({
type: ERROR_FETCHING_DATA,
payload: err,
}));
};

如何在typescript上转换这个文件

Answer 1

根据代码中的信息，您可以将代码转换为:

import { ApolloClient } from "@apollo/client";
import { Dispatch } from "redux";
export type State = {}; // it should be your state which fetchData gives
//these are strings which you use them on fetchData
const TEST_GQL = "TEST_GQL"; 
const FETCH_DATA = "FETCH_DATA";
const ERROR_FETCHING_DATA = "ERROR_FETCHING_DATA";
const FETCHED_DATA = "FETCHED_DATA";
export const fetchData = () => (
dispatch: Dispatch,
getState: () => State,
apolloClient: ApolloClient<any>
) => {
dispatch({ type: FETCH_DATA });
apolloClient
.query({
query: TEST_GQL,
variables: {
limit: 100
}
})
.then((res) => {
const data = res.data;
if (data.error) {
return dispatch({
type: ERROR_FETCHING_DATA,
payload: data.error
});
}
return dispatch({
type: FETCHED_DATA,
payload: data.data
});
})
.catch((err) =>
dispatch({
type: ERROR_FETCHING_DATA,
payload: err
})
);
};

Answer 2

我不确定我的答案是什么。

但是我希望，这段代码会对你有所帮助!

import { Dispatch } from "redux";
export const fetchData = () => (dispatch : Dispatch, getState : any /* ex) (val)=>void */, apolloClient : any /* must be apolloclient class type!*/ ) => {
let FETCH_DATA : string = "";
let TEST_GQL : string = "";
let ERROR_FETCHING_DATA : string = "";
let FETCHED_DATA : string = "";
dispatch({ type: FETCH_DATA });

apolloClient
.query({
query: TEST_GQL,
variables: {
limit: 100,
},
})
.then((res : { data : any } /* must be apolloclient response type */) => {
const data = res.data;

if (data.error) {
return dispatch({
type: ERROR_FETCHING_DATA,
payload: data.error,
});
}

return dispatch({
type: FETCHED_DATA,
payload: data.data,
});
})
.catch((err : any) => dispatch({
type: ERROR_FETCHING_DATA,
payload: err,
}));
};