Redux의 단점은 어느 한 reducer에 dipatch할 때, 다른 reducer에 동시에 dispatch할 수 없다는 (동시에 바꿀 수 없다는) 것이다.
이를 해결하기 위해 Redux-Saga를 사용할 수 있다.

예를 들어 게시글(post)을 추가한다고 할 때 유저 정보의 게시글 정보(user.Posts)도 같이 추가할 수 있게 하는 것이다.

Redux-Saga에서 user에 dispatch

서버에 게시글을 추가 하고, 성공했다면 그 정보를 post를 담당하는 saga에서 user reducer로 dispatch 한다.

    yield put({
      // user reducer의 데이터를 수정
      type: ADD_POST_TO_ME,
      data: result.data.id,
    });

front/sagas/post.js

import { takeLatest, put, call } from 'redux-saga/effects';
import {
  ADD_POST_REQUEST,
  ADD_POST_FAILURE,
  ADD_POST_SUCCESS,
} from '../reducers/post';
import { ADD_POST_TO_ME } from '../reducers/user';

function addPostAPI(postData) {
  return Axios.post('/post/', postData, {
    withCredentials: true,
  });
}

function* addPost(action) {
  try {
    const result = yield call(addPostAPI, action.data);

    yield put({
      // post reducer의 데이터를 수정
      type: ADD_POST_SUCCESS,
      data: result.data,
    });
    yield put({
      // user reducer의 데이터를 수정
      type: ADD_POST_TO_ME,
      data: result.data.id,
    });
  } catch (e) {
    console.log(e);
    yield put({
      type: ADD_POST_FAILURE,
      error: e,
    });
  }
}

function* watchAddPost() {
  yield takeLatest(ADD_POST_REQUEST, addPost);
}

Redux에서 user state 업데이트

front/reducers/user.js

export const ADD_POST_TO_ME = 'ADD_POST_TO_ME';

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_POST_TO_ME: {
      return {
        ...state,
        me: {
          ...state.me,
          Posts: [{ id: action.data }, ...state.me.Posts],
        },
      };
    }
  }
}

export default reducer;