如何使用createAsyncThunk助手调度AsyncThurk

Question

我目前正在尝试学习一些typescript/redux/reactnative。

我想我已经掌握了redux如何处理状态管理的基本概念。然而，我现在有点拘泥于让异步状态管理与redux-thunk中间件一起工作。

到目前为止，我有一个简单的反例：

Rootreducer.tsx

import { combineReducers } from "@reduxjs/toolkit";
import { create } from "react-test-renderer";
import { createStore, applyMiddleware } from "redux"
import thunk, {ThunkMiddleware} from "redux-thunk";
import { AppActions } from "../Util/Types";
import counterReducer from "./CounterReducer"
export const rootReducer = combineReducers({
counter: counterReducer
})
export type AppState = ReturnType<typeof rootReducer>
const middleware = applyMiddleware(thunk as ThunkMiddleware<AppState, AppActions>)
export const store = createStore(rootReducer, middleware)

CounterReducer.tsx:

import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit"
import { CounterState } from "../Util/Types"
const initialState = { num : 0 } as CounterState
function delay(milliseconds: number, count: number): Promise<number> {
return new Promise<number>(resolve => {
setTimeout(() => {
resolve(count);
}, milliseconds);
});
}
export const delayedIncrement = 
createAsyncThunk (
"delayedIncrement",
async(arg : number , thunkAPI) => {
const response = await delay(5000, 5)
return response
}
)
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
increment(state) {
state.num++
},
decrement(state) {
state.num--
},
incrementByAmount (state, action : PayloadAction<number>) { 
state.num += action.payload
}
},
extraReducers : {
[delayedIncrement.fulfilled.type]: (state, action) => {
state.num += action.payload
},
[delayedIncrement.pending.type]: (state, action) => {
state.num
}
}
})
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

计数器.tsx:

import { FC, useState } from "react";
import  { Button, Text, View } from "react-native"
import React from "react"
import { connect, ConnectedProps, useDispatch } from "react-redux"
import  { AppState } from "../Reducers/RootReducer" 
import { increment, decrement, incrementByAmount, delayedIncrement} from "../Reducers/CounterReducer";
const mapState = (state : AppState) => ({
counter: state.counter.num
})
const mapDispatch = {
increment : () => ({ type: increment }),
decrement : () => ({ type : decrement }),
incrementByAmount : (value : number) => ({type: incrementByAmount, payload: 5})
}
const connector = connect(
mapState,
mapDispatch
)
type PropsFromRedux = ConnectedProps<typeof connector>
interface CounterProps extends PropsFromRedux  {
a : string
}
const Counter : FC<CounterProps> = (props) => {
const dispatch = useDispatch 
return (
<View>
<Text>{props.a}</Text>
<Text>{props.counter.toString()}</Text>
<Button title="increment" onPress={props.increment}> </Button>
<Button title="decrement" onPress={props.decrement}> </Button>
<Button title="increment5" onPress= {  () => { props.incrementByAmount(5) }}> </Button>
<Button title="delayed" onPress= {  () => { dispatch (delayedIncrement(5)) }}> </Button>
</View>
)
}
export default connector(Counter)

当我尝试将延迟增量调度为这样时：

<Button title="delayed" onPress= {  () => { dispatch (delayedIncrement(5)) }}> </Button>

我得到以下错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

我已经非常仔细地遵循了redux提供的文档，所以我不确定为什么我不能让它发挥作用？这个错误本身对我来说没有多大意义，但我对javascript一般不太熟悉。

任何形式的建议或帮助都将不胜感激。

Answer 1

React组件错误。

您有：

const dispatch = useDispatch

请注意，这只是将useDispatch钩子本身指定为dispatch函数，这是不正确的。这意味着以后，当您调用dispatch()时，实际上是在调用useDispatch()。这会导致钩子使用错误。

相反，您需要：

const dispatch = useDispatch();

即，现在调用钩子，将结果保存为名为dispatch的变量。