如何使用流类型来定义Redux store的类型？

Question

我正在尝试使用流类型正确地键入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>抱怨说他找不到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,
  };

我已经看过这篇文章了，它和我的很相似，但到目前为止还没有答案，所以这篇文章就像一个bump typing redux store using flowtype and flow-typed。

感谢您的帮助！

Answer 1

您需要为Store类型提供S和A。例如,

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中提供的更完整的示例。