Redux #1

Redux란?

상위 컴포넌트로부터 하위 컴포넌트까지의 상태값의 효율적인 전달을 위해서 Context Api를 사용한다. 하지만 앱의 규모가 커지면 커질수록 컴포넌트의 개수와 데이터 개수가 늘어남에 따라 코드도 복잡해지고 길어진다. 이를 해결하기 위해 상태값을 중앙화 시켜 유지관리하기 편하게 만들기 위해 Redux를 사용한다.

• Redux의 3가지 규칙

  1. 하나의 어플리케이션 안에는 하나의 스토어가 있다.
  2. 상태는 읽기 전용으로 업데이트해야 할 때에는 기존의 배열을 수정하지 않고 새로운 배열을 만들어서 교체한다.
  3. 변화를 일으키는 리듀서는 순수 함수여야한다.

• 액션과 리듀서

// 액션타입을 정의해줍니다.
const ACTIONTYPE = "action_type";

// 매개변수를 갖는 액션생성함수를 만듭니다.
export const actionType = (payload) => ({ type: ACTIONTYPE, payload });

// 상태의 초기값을 정의합니다.
const initialState = {
  state: 0,
};

// 리듀서 함수에서는 액션 타입에 따라 상태를 변환시켜 반환합니다.
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTIONTYPE:
      return { state: state+action.payload };
    default:
      return state;
  }
};

export default reducer;

• createAction과 handleActions을 사용하면 더 편하게 액션과 리듀서를 만들 수 있다.

import { createAction, handleActions } from "redux-actions";

const ACTIONTYPE = "action_type";

export const actionType = createAction(ACTIONTYPE);

const initialState = {
  state: 0,
};

const reducer = handleActions(
  {
    [ACTIONTYPE]: (state, action) => {
      state: state + action.payload;
    },
  },
  initialState
);

export default reducer;

• 리듀서가 늘어나면 combineReducers를 이용해서 여러 개의 리듀서들을 하나의 리듀서로 합칠 수 있다.

import { combineReducers } from "redux";

reducer1...
reducer2...

const rootReducers = ({ reducer1,reducer2 })

• 스토어 작성 및 적용

// store.js
const store = createStore(rootReducer);
export default store;

// index.js
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);