2016-08-04 17 views
3

コンポーネントInfiniteLoader react-virtualisedから、プロパティloadMoreRowsとして渡された関数は、{ startIndex: number, stopIndex: number }): Promiseのようなシグネチャを持つ必要があります。このアクションがInfiniteLoaderが反応し、Reduxのから関数を接続し使用して含有する成分を反応させるために接続され、その後InfiniteLoaderとreact-redux

const fetchEntities(start, stop) { 
    return fetch(`${myUrl}&start=${start}?stop=${stop}`) 
} 
const loadMoreRows = ({ startIndex, stopIndex }) => { 
    return (dispatch, getState) => { 
    return function(dispatch) { 
     return fetchEntities(startIndex, stopIndex).then(
     items => dispatch(simpleAction(items)), 
     error => console.log(error) 
    ) 
    } 
    } 
} 

:私は私のプロジェクトでReduxのを使用してい は、そうloadMoreRowsは、このようなReduxのアクションの作成者です。

は、だから私はReduxのアクションクリエイターが

+0

私がreact-virtualisedのソースコードから理解しているように、loadMoreRows関数からPromiseを返す必要はありません。ただし、そうでない場合は、子コンポーネントを更新するためにchild.forceUpdate()を呼び出す必要があります。 – eyeinthebrick

答えて

2

eyeinthebrickが正しいか/どのような値を返さないように私には、署名の要件を満たすことができるか、わかりません。プロミスはが必要です戻り値です。

Reduxアクション作成者に「接続」すると、それを呼び出す(ディスパッチする)と実際にプロミスが返されます。例えばだから私は

function fetchEntities (start, stop) { 
    return fetch(`${myUrl}&start=${start}?stop=${stop}`) 
} 

const loadMoreRows = ({ startIndex, stopIndex }) => { 
    return async (dispatch, getState) => { 
    try { 
     const items = await fetchEntities(startIndex, stopIndex) 
     await dispatch(simpleAction(items)) 
    } catch (error) { 
     console.log(error) 
    } 
    } 
} 

た時点InfiniteLoaderが返さReduxの約束を待つだけのことができます...あなたはもっとこのような何かを行うことができると思います。

+0

まだ私はes7を使用していないので、今チェックすることはできません。私の現在の解決策は、ComponentWillRecievePropsでダウンロードしたアイテムを思いやりながら手で更新しています。新しいダウンロードされたアイテムがある場合は、 '' virtualScroll.recomputeRowHeights() ''を呼び出します。 – eyeinthebrick

+0

ES7は必要ありません。 async/awaitを通常のPromiseチェンジで置き換えることはできますが、それでも動作するはずです。 :) – brianvaughn

+0

ブライアン、私はあなたがミドルウェアの存在と使用を前提としていると思います。箱から出して、AFAICTの派遣はちょうどアクションを返します。 –

関連する問題