2016-09-17 2 views
3

구현하려고하는데 Twitter라고합시다. 그때Redux가 오래된 데이터를 방지합니까?

initialState = { 
    tweets: {id => tweet} 
} 

뭔가를하고있어, 사용자가 자신의 타임 라인에 간다, 이제 액션 fetchTweets 그의 모든 트윗을 가져옵니다. 그러나 그는 짹짹 트윗을 게시 할 수 있습니다. 그러나 수동으로 게시 된 T를 state.tweets에 수동으로 삽입하지 않으면 자신의 타임 라인에서이 트윗을 보지 못합니다.

그래서 사용자가 페이지에서 일부 작업을 수행했을 때 데이터를 새로 고치는 것이 좋은 점이 무엇입니까? 이런 종류의 경우 redux가 데이터를 부실하지 않도록하려면 어떻게해야합니까?

감사합니다.

답변

3

Redux가 주를 관리합니다. React-Redux와 같이 국가의 모든 변화에 대해 듣고 자하는 사람에게 알려줍니다.

트윗과 같은 데이터를받는 데 도움이되는 것은 없습니다. 또한이 데이터를 언제 얻을 수 있는지 결정하는 데 도움이되지 않습니다.

언제 이것을 할 것인지 결정해야하며 setTimeout 또는 다른 느낌이들 수 있습니다.

게시 할 때 상태를 트위터에 수동으로 삽입하는 것이 가장 좋습니다. 그것은 훨씬 더 반응 적입니다.

3

Redux를 사용할 때 약간의 패러다임이 바뀌지 만 어떤 기능도 사용자의 상태가되는 것을 원하지는 않습니다. 따라서 초기 상태는 사실 null이거나 빈 개체 (해당 소품을받는 구성 요소의 디자인에 따라 다름)이어야합니다. 그러나 좀 더 직접적으로 질문에 대답하기 위해 데이터가 "신선한"상태를 유지하기를 원할 경우이를 실현해야합니다. Redux에는 훌륭한 마술이 없습니다.

그러나 코드를 올바르게 디자인하면 사용자가 전체 페이지를 새로 고치는 것과 비슷한 것을 경험해서는 안됩니다. 높은 수준에서, 당신이 묘사하고있는 것을 디자인 할 수있는 방법이 있습니다. 즉, 요청하고 트윗을 수신

쓰기 작업 : 단지 감소

다음
export const fetchTweets =() => { 
    return (dispatch, getState) => { 
     dispatch(requestTweets()) 
     //network code here is pseudocode 
     fetch('https://tweeter/api/v1/tweets') 
     .then(data => dispatch(receiveTweets(data)) 
     .catch(err => displayErrorMsg(err)) 
    } 
} 

액션 핸들러에 :

export function requestTweets() => { 
    return { 
     type: REQUEST_TWEETS 
    } 
} 
export function receiveTweets(tweets) => { 
    return { 
     type: RECEIVE_TWEETS, 
     payload: tweets 
    } 
} 

그럼 어디든지 재사용 할 수있는 "공공"기능에 그 포장 다음 상태로 짹짹.

이제 fetchTweets를 사용하여 게시 후 또는 간격으로 첫 번째로드에서 호출 할 수 있습니다. 좋은 점은 React가 diffing을 잘 처리하고 전체 페이지를 다시 렌더링하지 않는다는 것입니다. 사용자가 새로운 짹짹이 언제 들어 왔는지 알 수 있도록 잘 설계하는 것은 사용자의 몫입니다.

희망이 있습니다!

관련 문제