[Redux] 아주 아주 간단한 리덕스 기본 개념

createStore는 deprecated 되었지만 동작에 아무 문제가 없고

런타임 경고도 아니므로 사용해도 상관 없다는 것이 오피셜입니다.

취소선이 신경 쓰인다면 legacy_createStore을 사용하면 됩니다.

import { legacy_createStore as createStore } from 'redux';

리덕스가 동작하는 몇 가지 줄기가 있습니다.

 

1. 상태 변화를 일으키는 객체인 액션

2. 선택은 자유이지만 사용하면 좋은 액션 생성 함수

3. 리듀서 함수(순수함수여야 함)

4. 디스패치

5. 스토어(한 어플리케이션 당 스토어는 하나만 만들 것을 강력히 권장)

6. subscribe 함수 - 실무 환경에서 이 함수를 직접 호출하는 일은 거의 없음

 

import { legacy_createStore as createStore } from 'redux';

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 = (text) => ({
  type: CHANGE_TEXT,
  text,
});

const addToList = (item) => ({
  type: ADD_TO_LIST,
  item,
});

// 최초 state 값을 반드시 넣어줘야 한다
const 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);

// 액션이 dispatch 될 때마다 호출됨
// 즉, 스토어의 상태가 업데이트될 때마다 호출됨
// 컴포넌트가 리덕스를 구독하면 상태가 바뀔 때 컴포넌트를 리렌더링함
const listener = () => {
  const state = store.getState();
  console.log(state);
};

const unsubscribe = store.subscribe(listener);
// unsubscribe();

store.dispatch(increase());
store.dispatch(decrease());
store.dispatch(changeText('안녕하세요'));
store.dispatch(addToList({ id: 1, text: 'wow' }));

window.store = store;