2017-05-09 21 views
2

私はこのコードを私のアプリに持っています。 react-reduxアプリで初期アクションを効果的にディスパッチする方法は?

componentWillMount() { 
    if(!this.props.posts.request.sending && this.props.posts.items.length == 0) { 
    this.props.fetchData({ 
     page: this.props.posts.request.page 
    }); 
    } 
} 

のでどのようなコードがないと、部品が実装されるとき、それはprops.postsは、すべての要求を送信していないかどうかを確認し、items配列内の何もないということでしょうです。そうであれば、 fetchDataというアクションを送出します。

私の質問は、それを処理するために反応する必要がないこれを行うためのより良い方法はありますか?私は、データの表示やボタンがクリックされたときのアクションのディスパッチ、反応から完全に分離された初期フェッチアクションのディスパッチなどの副作用のようなUI/UX側を処理するために反応する必要があるからです。

EDIT [1]:

const request = yield select(getRequest); 
const posts = yield select(getPosts); 

if(!request.sending && posts.length == 0) { 
    yield fork(fetchDataWorker, { payload: { page: request.page } }); 
} 

をし、それは完全に正常に動作します:私はすべての副作用を処理するためにReduxの-サガを使用していますが、私はこのような何かを行うことができることを実現

これは大丈夫ですか?

答えて

0

これは私が思いついた最善の解決策です。私はこれが誰かを助けてくれることを願っています。より良い方がいれば、あなたの答えを投稿してください。

const request = yield select(getRequest); 
const posts = yield select(getPosts); 

if(!request.sending && posts.length == 0) { 
    yield fork(fetchDataWorker, { payload: { page: request.page } }); 
} 

はとても基本的に、あなたは、あなたは、特定の条件が満たされたとき、私の場合はので、何かを実行するために確認する必要がある状態の一部を取得する必要があり、2 selectors必要がある場合、要求(つまりgetRequestセレクタから来た)が現在リクエストを送信しておらず、ポスト(getPostsセレクタから来たもの)が空であれば、私はfetchDataWorkerをフォークし、ワーカーはAPIリクエストを送信し、それに応じてアクションをディスパッチする責任があります。

のGetRequestセレクタ

export default function getRequest(state) { 
    return { 
    ...state.posts.request 
    } 
} 

としてgetPostsセレクタ

export default function getPosts(state) { 
    return [...state.posts.items]; 
} 

fetchDataWorker

function* fetchDataWorker(action) { 
    try { 
    let response = yield call(axios.get, '/posts/' + action.payload.page); 
    yield put({ type: 'FETCH_DATA_SUCCESS', items: [...response.data.items] }); 
    } catch(err) { 
    yield put({ type: 'FETCH_DATA_FAILED', timeOut: 5 }); 
    yield put({ type: 'TIMER_COUNT' }); 
    } 
} 
関連する問題