Awesome Redux 생태계 및 미들웨어 치트시트

Redux 생태계의 주요 라이브러리, 액션 생성자 유틸리티 및 비동기 미들웨어 패턴을 정리한 엄선 가이드입니다.

액션 생성자 및 유틸리티

`redux-actions`

Flux Standard Action (FSA) 표준 규격을 준수하는 액션 생성자를 만듭니다:

import { createAction } from 'redux-actions';

const increment = createAction('INCREMENT', amount => amount);
// increment(42) → { type: 'INCREMENT', payload: 42 }

// Automatically handles error objects:
const err = new Error('Network failure');
// increment(err) → { type: 'INCREMENT', payload: err, error: true }

See: redux-actions on npm

Flux Standard Action (FSA)

type, payload, error, 선택적 meta 필드만 포함하는 인간 친화적 Flux 액션 표준:

// Success action
{
  type: 'ADD_TODO',
  payload: { text: 'Write documentation' }
}

// Error action
{
  type: 'ADD_TODO',
  payload: new Error('Failed to save'),
  error: true
}

See: flux-standard-action on GitHub

`redux-multi`

단일 dispatch 호출로 여러 액션 배열을 한 번에 전달:

store.dispatch([
  { type: 'INCREMENT', payload: 1 },
  { type: 'NOTIFY', payload: 'Count updated' }
]);

`reduce-reducers`

네임스페이스 중첩 없이 순차적 리듀서를 결합:

import reduceReducers from 'reduce-reducers';

const combined = reduceReducers(
  (state, action) => (action.type === 'ADD' ? state + action.payload : state),
  (state, action) => (action.type === 'MULTIPLY' ? state * action.payload : state)
);

비동기 미들웨어 및 부수 효과

`redux-thunk`

액션 객체 대신 dispatch 및 getState에 접근 가능한 함수를 반환하는 액션 생성자 작성 지원:

const fetchUser = (id) => async (dispatch, getState) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const res = await fetch(`/api/users/${id}`);
    const data = await res.json();
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', payload: error, error: true });
  }
};

// Dispatch like a normal action:
store.dispatch(fetchUser(42));

See: redux-thunk on GitHub

`redux-promise`

payload의 Promise를 자동으로 해결한 후 리듀서로 전달하는 FSA 규격 미들웨어:

import { createAction } from 'redux-actions';

const fetchPosts = createAction('FETCH_POSTS', async () => {
  const response = await fetch('/api/posts');
  return response.json();
});

// Resolves payload promise automatically:
store.dispatch(fetchPosts());

`redux-logger`

상태 변화와 디스패치된 액션을 브라우저 콘솔에 시각적으로 기록:

import { createLogger } from 'redux-logger';

const logger = createLogger({
  collapsed: true,
  diff: true
});