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

SeungMai(junior)·2021년 7월 28일
0

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;
profile
👍🏻 SeungMai (매 순간 기록을!)🧑🏻‍💻 | WIL만 올리고 있습니다 | 기술블로그는 아래 🏠 의 링크를 이용해주세요.

0개의 댓글

관련 채용 정보