使用 TypeScript 在 React 组件之外调度 Redux Thunk 操作

Question

我正在将 React Native 应用程序转换为 TypeScript，并且在存储外调度 thunk 操作时遇到问题。以下是我的商店目前的设置方式：

store/index.ts

import { createStore, applyMiddleware, combineReducers, Reducer, Store } from 'redux';
import thunk, { ThunkMiddleware } from 'redux-thunk';
export interface State { ... }
export interface ActionTypes { ... } // All of the non-thunk actions
const reducer: Reducer<State> = combineReducers({ ... });
export default (): Store<State> => {
return applyMiddleware(
thunk as ThunkMiddleware<State, ActionTypes>
)(createStore)(reducer);
}

索引.tsx

import { Provider } from 'react-redux';
import createStore from './store/index';
import { registerStore } from './store/registry'; 
const store = createStore();
registerStore(); // Registers the store in store/registry.ts
AppRegistry.registerComponent(appName, () => () => (
<Provider store={store}>
<App />
</Provider>
));

store/registry.ts

import { Store } from 'redux';
import { State } from './index';
let store: Store<State>;
export const registerStore = (newStore: Store<State>) => {
store = newStore;
};
export const getStore = () => store;

因此，创建商店时，我将其存储在商店注册表中，以便我可以从任何地方调用getStore()。

---

这在组件(我不使用注册表的地方)中工作正常，例如在我的App.tsx中：

import { connect } from 'react-redux';
import { ThunkDispatch } from 'redux-thunk';
import { checkAuthStatus as checkAuthStatusAction } from './store/modules/auth/actions';
import { ActionTypes, State as AppState } from './store/index';
interface State = { ... }
interface StateProps { ... }
interface DispatchProps {
checkAuthStatus: () => Promise<boolean>;
}
type Props = StateProps & DispatchProps;
class App extends Component<Props, State> {
async componentDidMount() {
const promptSkipped: boolean = await checkAuthStatus(); // Thunk action, works fine!
}
...
}
const mapStateToProps = ...;
const mapDispatchToProps = (dispatch: ThunkDispatch<AppState, null, ActionTypes>): DispatchProps => ({
checkAuthStatus: () => dispatch(checkAuthStatusAction()),
});
export default connect<StateProps, DispatchProps, {}, AppState>(
mapStateToProps,
mapDispatchToProps,
)(App);

---

当我想使用注册表调度一个 thunk 操作时，问题就来了：

lib/notacomponent.ts

import { getStore } from '../store/registry';
import { checkAuthStatus, setLoggedIn } from '../store/modules/auth/actions'
const someFunction = () => {
const store = getStore();
const { auth } = store.getState(); // Accessing state works fine!
store.dispatch(setLoggedIn(true)); // NON-thunk action, works fine!
store.dispatch(checkAuthStatus()); // Uh-oh, thunk action doesn't work.
}

这给了我错误：

Argument of type 'ThunkAction<Promise<boolean>, State, null, Action<any>>' is 
not assignable to parameter of type 'AnyAction'.
Property 'type' is missing in type 'ThunkAction<Promise<boolean>, State, null, Action<any>>'
but required in type 'AnyAction'. ts(2345)

据我所知，使用thunk as ThunkMiddleware<State, ActionTypes>作为中间件允许Redux Thunk将商店调度方法替换为可以调度thunk操作和正常操作的方法。

我想我需要以某种方式键入注册表，以便 TypeScript 可以看到调度方法不是只允许正常操作的默认方法。然而，我不知道该如何做到这一点。我找不到任何其他人做同样事情的例子。

任何帮助，不胜感激。

---

编辑：建议的副本 如何调度操作或ThunkAction(在TypeScript中，使用redux-thunk)？ 不能解决我的问题。我可以在组件内部很好地调度 thunk 动作。我只在使用上面定义的商店注册表在组件之外遇到问题。

---

编辑2：因此，在调度thunk操作以消除错误时，我似乎可以使用以下类型断言：

(store.dispatch as ThunkDispatch<State, void, ActionTypes>)(checkAuthStatus())

不过，这是非常不切实际的。我还没有找到一种方法来做到这一点，所以TypeScript知道dispatch方法应该总是能够调度一个thunk动作。

Answer 1

你的代码几乎是正确的。您错误地设置了默认导出的返回类型。

export default (): Store<State> => {
return applyMiddleware(
thunk as ThunkMiddleware<State, ActionTypes>
)(createStore)(reducer);
}

在使用中间件的情况下，上面的函数应该返回的不是Store<State>，而是Store<S & StateExt, A> & ExtExt将被重载dispatch这将能够调度函数(就像 redux-thunk 所做的那样)。

为了简化起见，只需删除确切的返回类型，然后让 TypeScript 推断类型本身

export default () => {
return applyMiddleware(
thunk as ThunkMiddleware<State, ActionTypes>
)(createStore)(reducer);
}

这解决了你的问题。

或者，您可以使用更经典的方法来创建存储。

export default () => {
return createStore(reducer, applyMiddleware(thunk as ThunkMiddleware<State, ActionTypes>));
}

这里的基本内容：

1. 按照 Redux 官方文档的建议使用createStore。createStore使用中间件调用，因为第二个参数本身会调用它。但是 redux 和 redux-thunk 的 TypeScript 声明文件是为这种使用createStore而预先配置的。所以返回的商店将有修改版本的dispatch。(记下StoreEnhancer<Ext, StateExt>Ext and StateExt类型参数。它们将与生成的存储相交，并添加dispatch的重载版本，该版本将接受函数作为参数)。

2. 此外，默认导出功能的返回类型将从createStore的返回类型推断出来。它不会Store<State>.

Answer 2

const boundActions = bindActionCreators( { checkAuthStatus }, store.dispatch);
boundActions.checkAuthStatus();

这有效，看起来不像"Edit2"那么笨拙