[Redux] 사용해보기

설치

새로운 앱 만들기

npx create-react-app learn-redux

redux 설치

yarn add redux

파일 만들기

테스트 파일 생성

src 경로에 test.js 파일 생성

상태 정의

const initialState = {
  counter: 0,
  text: "",
  list: [],
};

액션 타입 정의

const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const CHANGE_TEXT = "CHANGE_TEXT";
const ADD_TO_LIST = "ADD_TO_LIST";

액션 생성함수 정의

액션 객체를 반환하는 함수를 생성한다.

const increase = () => ({
  type: INCREASE,
});
const decrease = () => ({
  type: DECREASE,
});
const changeText = () => ({
  type: CHANGE_TEXT,
});
const addToList = () => ({
  type: ADD_TO_LIST,
});

리듀서 만들기

각 액션 타입에 따라 상태를 업데이트하는 리듀서 함수를 생성한다.

function reducer(state = initialState, action) {
  switch (action.type) {
    case INCREASE:
      return {
        ...state,
        counter: state.counter + 1,
      };
    case DECREASE:
      return {
        ...state,
        counter: state.counter - 1,
      };
    case CHANGE_TEXT:
      return {
        ...state,
        text: action.text,
      };
    case ADD_TO_LIST:
      return {
        ...state,
        list: state.list.concat(action.item),
      };
    default:
      return state;
  }
}

스토어 만들기

const store = createStore(reducer);

리스너 만들기

store.subscribe(listener)로 스토어의 상태를 구독할 수 있다.

unsubscribe()를 실행하면 구독을 해제한다.

const listener = () => {
  const state = store.getState();
  console.log(state);
};
const unsubscribe = store.subscribe(listener);

테스트

각 액션들을 디스패치 해보면 리스너가 감지하여 콘솔이 찍힌다.

store.dispatch(increase());
store.dispatch(decrease());
store.dispatch(changeText("Bye~"));
store.dispatch(addToList({ if: 1, text: "Hello" }));

// {counter: 0, text: '', list: Array(0)}
// {counter: 1, text: '', list: Array(0)}
// {counter: 0, text: '', list: Array(0)}
// {counter: 0, text: 'Bye~', list: Array(0)}
// {counter: 0, text: 'Bye~', list: Array(1)}

과정

• dispatch() 메서드 호출

• 스토어에서 리듀서 호출

• 액션 발생

• subscribe() 메서드로 등록한 리스너 호출

참고사이트

3. 리덕스 사용 할 준비하기