2017-12-13 14 views
1

私は反応プロジェクト用のタイプ付きのReduxストアを構築中です。インターフェイスは正常に動作しているようですが、私自身がエクスポート内でそれらを渡そうとします。私は今のところ'ItemIsLoading'はタイプを参照していますが、ここで値と​​して使用されています

export const ITEMS_HAS_ERRORED = 'ITEMS_HAS_ERRORED'; 
export type ITEMS_HAS_ERRORED = typeof ITEMS_HAS_ERRORED; 

export const ITEMS_IS_LOADING = 'ITEMS_IS_LOADING'; 
export type ITEMS_IS_LOADING = typeof ITEMS_IS_LOADING; 

export const ITEMS_FETCH_DATA_SUCCESS = 'ITEMS_FETCH_DATA_SUCCESS'; 
export type ITEMS_FETCH_DATA_SUCCESS = typeof ITEMS_FETCH_DATA_SUCCESS; 

import * as constants from '../constants/constantsIndex'; 

    export interface ItemHasErrored { 
     type: constants.ITEMS_HAS_ERRORED; 
    } 

    export interface ItemIsLoading { 
     type: constants.ITEMS_IS_LOADING; 
    } 

    export interface ItemFetchDataSuccess { 
     type: constants.ITEMS_FETCH_DATA_SUCCESS; 
    } 

    export function itemsFetchData(url: any) { 
     return (dispatch) => { 
      dispatch(ItemIsLoading(true)); 

      fetch(url) 
       .then((response) => { 
        if (!response.ok) { 
         throw Error(response.statusText); 
        } 

        dispatch(ItemIsLoading(false)); 

        return response; 
       }) 
       .then((response) => response.json()) 
       .then((items) => dispatch(ItemFetchDataSuccess(items))) 
       .catch(() => dispatch(ItemHasErrored(true))); 
     }; 
    } 

定数:私は

アクション次のエラー「タイプを指しますが、ここでの値として使用されている上の 『ItemIsLoading』」を受け取りますtypescript/reduxストアを構築しようとしていますが、この問題の性質に関する情報を見つけることはできません。誰かがこのエラーを解決するにはどうすればいいですか?

答えて

2

のtypecriptのインターフェイスはインスタンス化できませんが、拡張することもできます。したがって、インターフェイスの型シグネチャに一致するインスタンスを使用する場合は、それを拡張する必要があります。

あなたは

class ItemIsLoadingAction implements ItemIsLoading { 
    payload: boolean; 
    constructor(payload) { 
    this.payload = payload; 
    } 
} 

その後、クラスを使用して、インターフェイスを実装することができ、あなたはそれがこれはインターフェースの残りのために適用することができ

dispatch(new ItemIsLoadingAction(false))

のようなアクションをディスパッチするために、インスタンスの使用することができます。

+0

ありがとうございました。私はこれを試してみますが、これはreduxのアクションレベルで適用できますか?私はそれを理解する。これは、コンポーネントレベルでのみ適用されます – jpearsonNode

関連する問題