[React] Redux #3 | 리덕스 사용 준비

리덕스 라이브러리 설치

yarn add redux

 

redux 를 불러와서 redux에  내장된 API를 사용해보고 연습해보자!

exercise.js

import { createStore } from 'redux';

// createStore 는 스토어를 만들어주는 함수
// 리액트 프로젝트에서는 단 하나의 스토어를 만든다.

// 리덕스에서 관리할 상태 정의
const initialState = {
    counter: 0,
    text: '',
    list: []
};

// 액션 타입 정의
// 액션 타입은 주로 대문자!
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
const CHANGE_TEXT = 'CHANGE_TEXT';
const ADD_TO_LIST = 'ADD_TO_LIST';

// 액션 생성함수 정의
// 액션 생성함수는 주로 camelCase로 작성
function increase() {
    return {
        type: INCREASE // 액션 객체에는 type 값이 필수!
    }
}

// 화살표 함수로 작성하는 것이 더욱 코드가 간단
const decrease = () => ({
    type: DECREASE
});

const changeText = text => ({
    type: CHANGE_TEXT,
    text // 액션안에는 type 외에 추가적인 필드를 마음대로 넣을 수 있습니다.
})

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

// 리듀서 만들기
// 위 액션 생성함수들을 통해 만들어진 객체들을 참조하여
// 새로운 상태를 만드는 함수를 만듦
// 주의! 리듀서에서는 불변성을 꼭 지켜주기

function reducer(state = initialState, action){
    // state의 초깃값을 initialState로 저장
    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;           
    }
}

// 스토어 만들기 (createStore 함수 사용)
const store = createStore(reducer);

console.log(store.getState()); // getState(): store 메서드를 통해, 현재 store 안에 들어있는 상태 조회

// 스토어 안에 들어있는 상태가 바뀔때마다 호출되는 listener함수
const listener = () => {
    const state = store.getState();
    console.log(state);
}

// 구독을 해제하고 싶을 때는 unsubscribe()를 호출
const unsubscribe = store.subscribe(listener);

// 액션들을 디스패치
store.dispatch(increase());
store.dispatch(decrease());
store.dispatch(changeText('안녕하세요'));
store.dispatch(addToList({ id: 1, text: '와우' }));

1. 초기 상태 정의
2. 액션 타입 정의
3. 액션 생성함수 정의
4. 리듀서 만들기
5. 스토어 만들기
6. 스토어 안의 상태가 바뀔 대마다 호출되는 함수만들기
7. 액션 디스패치!

• 리덕스 스토어 안의 상태는 액션이 디스패치 됨에 따라 업데이트!
• 위 코드는 우리가 listener 함수를 만들어서 리덕스 상태에 변화가 생겼을 때마다 콘솔에 상태를 출력하도록 처리했음

결과

 

이제, 다음 포스팅에서는 본격적으로 리액트 프로젝트에 리덕스를 적용해 볼 것이다!

---

Reference

벨로퍼트의 모던 리액트