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 } }); 
} 

을하고 완벽하게 잘 작동 : 내 모든 부작용을 처리 할 수 ​​REDUX-무용담을 이용하고 있고 나는 이런 식으로 뭔가를 할 수 있다는 것을 깨달았다

괜찮아?

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 selector에서 온)가 현재 요청을 보내지 않고 게시물 (getPosts selector에서 온)이 비어 있으면 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' }); 
    } 
}