Redux 에서 State 설계 과정에서 겪은 어려움을 공유해주실 있을까요.?


iOS 쬬랩 Deployer 인데요.

안되로이나 WebFront 와 프로젝트를 함께하고 있습니다. WebFront 쪽은 React(Redux ?) 와 Reactive 방식이 있다고 하더라고요.

적용하면, WebFront 와 구현측면에서의 고민을 함께할 수 있을 것 같아 iOS앱에 Redux(Reswift) 적용중인데요.

고민이 많이서 질문 남깁니다.

  1. 비동기처리하는 좋은 방법.
  2. State 설계 전략
    • State 설계할 때 잘 고려하지 않으면, 나중에 지옥문을 열고 기름통을 들고 뛰어드는 형국이 되지 않을까 두렵네요.

언어 무관하게 (js, java, swift 상관없이) 적용했던 사례를 알려주시면 고이 갈무리 해두겠습니다.


조회수 275


1 답변


Redux는 일반 적인 Flux와 비슷한 비동기 방식을 사용합니다. 언급하신 문서의 예를 살펴봅시다.

export function fetchPosts(reddit) {
    return function (dispatch) {
    dispatch(requestPosts(reddit));

위의 코드에서 먼저 dispatch(requestPosts(reddit));를 호출해서 액션을 전달합니다. 이 액션이 상태를 바꿀 수도 있습니다. 그러면 React 등의 레이어에서 그 상태를 확인해서 프로그레스 바 등을 보여줄 수 있을 겁니다.

그리고 fetch를 수행해서 비동기 데이터가 갱신되게 하죠.

    return fetch(`http://www.reddit.com/r/${reddit}.json`)
      .then(response => response.json())
      .then(json =>
        dispatch(receivePosts(reddit, json))
      );

then 파트를 보시면 여기가 fetch가 수행이 끝난 후 호출되는 부분인데 다시 dispatch(receivePosts(reddit, json))를 호출해서 액션을 전달합니다. 이때 갱신된 데이터가 상태를 다시 갱신하겠죠.

이렇게 갱신전에 상태를 고치고 비동기 호출이 끝난 후에 다시 상태를 고치는 식으로 구성을 하는 것이 일반적입니다. 미들웨어의 도움을 받으면 이 과정을 좀 더 편리하게 줄일 수 있습니다만 결국 상태를 두번 수정하는 형태가 될 가능성이 높습니다.

Redux는 하나의 스토어를 사용하기 때문에 계층적으로 상태를 잘 설계를 하셔야 하고 다른 로직이 쓸 상태를 건딜지 않는 것이 주의할 점인 것 같습니다. 그리고 상태를 갱신하지 않고 새로운 상태를 만들어낸다는 것도 유의하실 부분입니다. 기존의 상태를 이용해서 새로운 값이 반영된 새로운 상태를 만들어서 스토어에 저장해야 합니다. Redux의 상태는 불변적으로 유지해야 합니다.

Reactive는 Rx라고 많이 이야기를 하는데 실제로 글을 읽어보면서 감을 잡는게 나으실 것 같습니다. RxAndroid로 리액티브 앱 만들기 시리즈를 참고해보세요. (iOS 개발자라고 하셔서 걱정되시긴 한데 Java도 괜찮다고 해서 올려봅니다.)

  • 2016년 06월 01일에 수정됨
    모바일 데이터 베이스를 만드는 yet another nit picker.
  • 2016년 03월 25일에 작성됨
    모바일 데이터 베이스를 만드는 yet another nit picker.

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close