6. redux-pender

프로젝트에 비동기 함수를 호출하면서 그 State 를 관리하기 위해 redux-pender 를 사용했는데,

onSuccess 에서 multiple actions 하는 과정에서 잘못된 형식을 사용하는 바람에 .........

redux-pender

 

Redux pender is a middleware that helps you to manage asynchronous actions based on promise.

It comes with useful tools that help you to handle this even more easier.

​

즉, Promise 기반의 비동기 actions 를 좀 더 편하게 관리하게 해주는 middleware 이다.

 

onSuccess 시 하나의 action

const GET_BLOG_POSTS = 'crawl/GET_BLOG_POSTS';

const initialState = Map({
  blogPosts: ''
});

export default handleActions(
  {
    ...pender({
      type: GET_BLOG_POSTS,
      onSuccess: (state, action) => state.set('blogPosts', 'test'),
      onFailure: (state, action) => {
        ...
      }
    })
  },
  initialState
);

근데 여기서 multiple actions 를 하겠다고 {...} 로 묶어 그대로 state.set 을 했더니

@@redux-pender 이 SUCCESS 되었음에도 state 적용이 안되었다.

export default handleActions(
  {
    ...pender({
      type: GET_BLOG_POSTS,
      onSuccess: (state, action) => {
        state.set('blogPosts', 'test');
      },
      onFailure: (state, action) => {
        ...
      }
    })
  },
  initialState
);

 

onSuccess 시 여러 actions

 

return 키워드를 사용해서 state.set 을 했더니 State 값이 제대로 적용되었다.

export default handleActions(
  {
    ...pender({
      type: GET_BLOG_POSTS,
      onSuccess: (state, action) => {
        console.log('multiple action');
        return state.set('blogPosts', 'test');
      },
      onFailure: (state, action) => {
        ...
      }
    })
  },
  initialState
);

---

참고 : https://github.com/velopert/redux-pender

velopert/redux-pender