使用 flowtype 和 flow-typed 输入 redux store

Question

我正在尝试to type the redux store 像这样：const s:Store<S,A>=createStore (todoApp) 但我明白了

identifier Store ... Could not resolve name流错误

知道如何解决这个问题吗？

我正在使用这个流类型声明：

// flow-typed signature: ba132c96664f1a05288f3eb2272a3c35
// flow-typed version: c4bbd91cfc/redux_v3.x.x/flow_>=v0.33.x

declare module 'redux' {

  /*

    S = State
    A = Action

  */

  declare type Dispatch<A: { type: $Subtype<string> }> = (action: A) => A;

  declare type MiddlewareAPI<S, A> = {
    dispatch: Dispatch<A>;
    getState(): S;
  };

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

  declare type Reducer<S, A> = (state: S, action: A) => S;

  declare type Middleware<S, A> =
    (api: MiddlewareAPI<S, A>) =>
      (next: Dispatch<A>) => Dispatch<A>;

  declare type StoreCreator<S, A> = {
    (reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A>): Store<S, A>;
    (reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A>): Store<S, A>;
  };

  declare type StoreEnhancer<S, A> = (next: StoreCreator<S, A>) => StoreCreator<S, A>;

  declare function createStore<S, A>(reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A>): Store<S, A>;
  declare function createStore<S, A>(reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A>): Store<S, A>;

  declare function applyMiddleware<S, A>(...middlewares: Array<Middleware<S, A>>): StoreEnhancer<S, A>;

  declare type ActionCreator<A, B> = (...args: Array<B>) => A;
  declare type ActionCreators<K, A> = { [key: K]: ActionCreator<A, any> };

  declare function bindActionCreators<A, C: ActionCreator<A, any>>(actionCreator: C, dispatch: Dispatch<A>): C;
  declare function bindActionCreators<A, K, C: ActionCreators<K, A>>(actionCreators: C, dispatch: Dispatch<A>): C;

  declare function combineReducers<O: Object, A>(reducers: O): Reducer<$ObjMap<O, <S>(r: Reducer<S, any>) => S>, A>;

  declare function compose<S, A>(...fns: Array<StoreEnhancer<S, A>>): Function;

}

Answer 1

这是一个如何键入 reducers 和存储的示例： （使用 redux v4 和 flow v0.108）

import { createStore, combineReducers } from 'redux';
import type { Action, Store } from 'redux';

type TodoState = $Exact<{
  +text: string;
  +completed: boolean;
  +id: number;
}>;

type TodoListState = TodoState[];
type VisibilityFilterState = 'SHOW_ACTIVE' | 'SHOW_ALL' | 'SHOW_COMPLETED';

const todoListReducer = (state: (TodoListState | void) = [], action: Action<any>): TodoListState => {
  // reducer code here    
};

const visibilityFilterReducer = (state: (VisibilityFilterState | void) = 'SHOW_ALL', action: Action<any>) : VisibilityFilterState =>  {
  // reducer code here
}

type AppState = $Exact<{
  todoListState: TodoListState,
  visibilityFilterState: VisibilityFilterState
}>;

const appStateReducer: (AppState | void, Action<any>) => AppState = combineReducers({
  todoListState: todoListReducer,
  visibilityFilterState: visibilityFilterReducer
});

const store: Store<AppState, Action<any> = createStore(appStateReducer);

Answer 2

您需要从redux 模块中导入类型Store。示例：

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

// ...

const s: Store<S, A> = createStore(todoApp) 

更多信息可以参考documentation for importing/exporting types from modules。