使用 flowtype 和 flow-typed 输入 redux store
typing redux store using flowtype and flow-typed
我正在尝试 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;
}
您需要从 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.
这是一个示例,您可以如何键入 reducer 和存储:
(使用 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);
我正在尝试 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;
}
您需要从 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.
这是一个示例,您可以如何键入 reducer 和存储: (使用 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);