如何使用 flow-typed 类型化 Redux store？答案

【问题标题】：How to use flow-typed to type Redux store?如何使用 flow-typed 类型化 Redux store？
【发布时间】：2019-04-21 08:13:43
【问题描述】：

我正在尝试使用流类型正确输入 Redux。我使用从redux 导入的Store 像这样输入我的商店，Flow 使用flow-typed 文件redux_v4.x.x.js 并引发错误：

/* @flow */
import rootReducer from '@reducers/index'
import type { Store } from 'redux'
import { applyMiddleware, createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'

const configureStore = () => {
   const store: Store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(thunk))
  )
  return store
}

export { configureStore as default }

使用此代码，我得到以下错误：Cannot use Store [1] without 2-3 type arguments。

我也尝试过这样定义它const store: Store<S, A>，但随后 Flow 抱怨他没有找到 S 和 A 的声明，这似乎很正常。

在flow-typed使用的redux_v4.x.x.js文件中，Store定义如下：

  declare export type Store<S, A, D = Dispatch<A>> = {
    // rewrite MiddlewareAPI members in order to get nicer error messages (intersections produce long messages)
    dispatch: D,
    getState(): S,
    subscribe(listener: () => void): () => void,
    replaceReducer(nextReducer: Reducer<S, A>): void,
  };

我已经看过这个帖子，和我的很相似，但至今没有答案，所以这个帖子就像一个凹凸typing redux store using flowtype and flow-typed。

感谢您的帮助！

【问题讨论】：

标签： reactjs react-native redux flowtype

【解决方案1】：

您需要将S 和A 提供给Store 类型。例如，

import { createStore } from 'redux';
import type { Store } from 'redux';

type State = Array<number>;
type Action = { type: 'A' };
type MyStore = Store<State, Action>;
const store: MyStore = createStore(...);

// or inline
const store: Store<Array<number>, { type: 'A' }> = createStore(...);

查看test_createStore.js 中提供的示例，或者，更完整的示例，请查看this sandbox。

【讨论】：