React-Redux로 브라우저 기록 처리하기

Question

우리는 귀하의 응용 프로그램에서 React-Redux를 사용하고 있습니다. 문제는 브라우저 버튼에서 사용자 탐색을 기반으로 Redux 상태를 실행 취소하고 다시 실행하려는 것입니다. 사용자가 페이지 A에 있고 사용자가 다른 페이지를 탐색 한 다음 페이지 A로 이동한다고 가정합니다. 이제 사용자가 브라우저에서 뒤로 버튼을 누르면 페이지 A로 돌아갈 것입니다.하지만 여기에서는 사용자가 페이지 A를 사용했을 때 어떤 응용 프로그램이 사용했는지에 대한 이전 상태를 원합니다.

해결 방법은 중앙 집중식입니까? 상태 조작을 수동으로 처리 할 필요가없는 문제.

Answer 1

달성하고자하는 것은 React-Redux의 기본 동작입니다. 라우트가 변경 될 때 특정 구성 요소의 상태를 조작하는 일부 조치를 디스패치하지 않으려는 경우, 추가 기능없이 이전 상태를 유지해야합니다.

내 생각 엔 새 경로가 구성 요소를로드 할 때 일부 작업을 전달한다는 것입니다. 그것은이 처리 될 수있는 방법 (예 : 마지막 구성 요소를 조작하는 원인이 존재하면 나머지 API에서 자원을 가져하지 않으면) 여기에 있습니다 : https://github.com/reactjs/redux/blob/master/examples/async/src/actions/index.js#L35이

const shouldFetchPosts = (state, reddit) => { 
    const posts = state.postsByReddit[reddit] 
    if (!posts) { 
    return true 
    } 
    if (posts.isFetching) { 
    return false 
    } 
    return posts.didInvalidate 
} 

export const fetchPostsIfNeeded = reddit => (dispatch, getState) => { 
    if (shouldFetchPosts(getState(), reddit)) { 
    return dispatch(fetchPosts(reddit)) 
    } 
} 

그래서이하고있는 것은이 통과하지 것입니다 기존 데이터/상태가 그대로 남아 있도록 한 번 경로가 변경되면 구성 요소에 새로운 데이터가 변경됩니다. 이 기능을 더 추상화하여 다른 모든 구성 요소에서 쉽게 재사용 할 수 있습니다.