如何在react-redux應用程序中有效地分派初始操作？

Question

我在我的應用程序中有此代碼。

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

等什麼代碼所做的就是當組件將被安裝，它會檢查，看看是否props.posts不發送任何請求，並沒有什麼項目數組中。如果是這樣，那麼它會派遣一個名爲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 } }); 
} 

和它的作品完美的罰款，但這是好嗎？

Answer 1

這是我想出了最好的解決方案，我希望這可以幫助一個人在那裏。如果你有更好的一個，請隨時發佈你的答案。

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

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

所以基本上你需要兩個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' }); 
    } 
}