2017-04-05 4 views
0

フロードキュメント(https://flow.org/en/docs/frameworks/redux/)で提案されているように、フローティングディスジョイントユニオンを使用してreduxアクションオブジェクトを強くタイプしようとしていますが、 (@@redux/INIT,@@redux/PROBE_UNKNOWN_ACTIONなど)を処理するエラーを処理します。フロー+ Redux:デフォルトデフォルトのアクションと強く型付けされたアクションのエラー

このコードのサンプルでは、​​次のようになります。

// Constant action type strings 
export const INIT_STORIES: 'INIT_STORIES' = 'INIT_STORIES'; 
export const UPDATE_STORY: 'UPDATE_STORY' = 'UPDATE_STORY'; 

// Strongly typed action objects 
export type InitAction = { 
    type: typeof INIT_STORIES, stories: Array<Story> 
}; 
export type UpdateAction = { 
    type: typeof UPDATE_STORY, storyIndex: number, story: Story 
}; 

// Disjoint union wrapper 
export type ActionType = 
| InitAction 
| UpdateAction; 

//reducer 
export default function storiesReducer(
    stories: Array<Story> = [], 
    action: ActionType 
): Array<Story> { 
    // Error is thrown at function invocation, prior to the first inner line of function 
    // Uncaught TypeError: [tcomb] Invalid value {"type": "@@redux/INIT" 
    console.log(action); 
    ... 
} 

私は、この問題のために、オンラインで1の問題/解決策を見つけることができた、それは問題を解決するために、より複雑なフローのランタイムを使用しています。 (https://github.com/codemix/flow-runtime/issues/80

ReduxとFlowを統合するために推奨される構文のように思えますが、もっと簡単な解決策が必要ですか?私は、関数のパラメータの型をactionと定義していない文字列型(つまり{ type: string })のオブジェクトとの結合を解除しようとしましたが、静的なlinting/typingを持つ型エラーがスローされます。なぜなら、オブジェクトはactionオブジェクトです。

+0

フロータイプで提供されているlibdefを使用していますか? –

+0

@LewisChungいいえ、私はそうではない、私はこれのための既製の図書館があることを知らなかった。私は間違いなくこれを調べます。私は、 'flow-typed' libdefの基本的なreduxアクション型の独立したunion ontopとして私のアクション定義を適用できると思いますか? – Mike

+0

あなたはtcombを使用しているので、同じ問題を抱えているように見えます。私はここに存在するフロー型の定義を変更することができるように見えるので、フロー型を使用したかどうか尋ねました:https://github.com/flowtype/flow-typed/blob/master/definitions/npm/redux_v3.xx /flow_v0.33.x-/redux_v3.xxjsは、デフォルトのフローアクションを自動的に考慮して、{"type": "@@ redux/INIT"}を取得しないようにします。つまり、私は、tcombが実際にフロータイプのlibdefをどのように使用するかについてはあまりよく分かりません。 –

答えて

0

最も簡単な解決策は、Reduxのために完全なflow-typedパッケージをインポートせずに、以下のように、ActionTypeばらばら組合型にばらばら組合{ type: $Subtype<string> }を追加することです:

// Disjoint union wrapper 
export type ActionType = 
| InitAction 
| UpdateAction 
| { type: $Subtype<string> }; 


//reducer 
export default function storiesReducer(
    stories: Array<Story> = [], 
    action: ActionType 
): Array<Story> { 
    console.log(action); 
    ... 
} 

場合、これは適切なエラーをスローしませんがアクションタイプの文字列が間違って入力されました。すべての文字列タイプが許可されているため、スイッチ/ケースブロック内の異なるオブジェクト形状を適切な分岐で認識することができます。

関連する問題