스파르타 코딩클럽 - 리액트 3주차(8)

1. 리덕스 써보기.

1-1. 덕스(ducks)구조

• 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성한다(액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성한다).

• 덕스 구조는 모양새로 묶는 대신 기능으로 묶어 작성한다(버킷리스트를 예로 들자면, 버킷리스트의 action, actionCreator, reduce를 한 파일에 넣는 것이다).

1.2. 리덕스 모듈 예제

// widgets.js

// Actions
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

// Reducer
export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}

// Action Creators
export function loadWidgets() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE, widget };
}

export function updateWidget(widget) {
  return { type: UPDATE, widget };
}

export function removeWidget(widget) {
  return { type: REMOVE, widget };
}

// side effects, only as applicable
// e.g. thunks, epics, etc
export function getWidget () {
  return dispatch => get('/widget').then(widget => dispatch(updateWidget(widget)))
}

2.1. 첫번 째 모듈 만들기.

• (1). Action

  두 가지 액션을 만든다.

  const LOAD = 'bucket/LOAD';
  const CREATE = 'bucket/CREATE';

• initialState

  초기 상태값을 만들어준다.

  const initialState = {
   list: ["영화관 가기", "매일 책읽기", "수영 배우기"],
  };
  

• Action Create

  액션 생성 함수를 작성한다.

  export const loadBucket = (bucket) => {
      return { type: LOAD, bucket };
  }
  
  export const createBucket = (bucket) => {
      return {type: CREATE, bucket};
  }

• Reducer

  리듀서를 작성한다.

  export default function reducer(state = initialState, action = {}) {
    switch (action.type) {
      // do reducer stuff
      case "bucket/LOAD":
        return state;
  
      case "bucket/CREATE":
        const new_bucket_list = [...state.list, action.bucket];
        return { list: new_bucket_list };
  
      default:
        return state;
    }
  }

• Store

  redux 폴더 하위에 configStore.js 파일을 만들고 스토어를 만든다.

  //configStore.js
  import { createStore, combineReducers } from "redux";
  import bucket from './modules/bucket';
  import { createBrowserHistory } from "history";
  
  // 브라우저 히스토리를 만들어줍니다.
  export const history = createBrowserHistory();
  // root 리듀서를 만들어줍니다.
  // 나중에 리듀서를 여러개 만들게 되면 여기에 하나씩 추가해주는 거예요!
  const rootReducer = combineReducers({ bucket });
  
  // 스토어를 만듭니다.
  const store = createStore(rootReducer);
  
  export default store;