리덕스 모듈 만들기

프로젝트에 리덕스를 적용하기 위해 리덕스 모듈을 만들어 보겠습니다.

| 리덕스 모듈이란 ?

구성요소

• 액션타입
• 액션 생성함수
• 리듀서

위와 같이 리덕스 모듈을 사용하기 위해 총 3가지 항목이 존재합니다.

 

첫 번째 리덕스 모듈.js

//액션 타입 만들기
//Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요,
// -> 다른 모듈과 액션 이름이 중복되는 것을 방지할 수 있습니다.
const SET_DIFF = 'counter/SET_DIFF';
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

//액션 생성함수 만들기
export const setDiff = (diff) => ({ type: SET_DIFF, diff });
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

//초기 상태
const init = {
    number: 0
    , diff: 1   //현재 받아 온 값
};

//리듀서 선언
export default function counter(state = init, action) {
    switch (action.type) {
        case SET_DIFF:
            return {
                ...state, diff: action.diff
            };
        case INCREASE: {
            return {
                ...state, number: state.number + state.diff   //setDiff 된 후 그 diff 와 number 와 더함
            };
        }
        case DECREASE: {
            return {
                ...state, number: state.number - state.diff
            };
        }
        default: return state;
    }
};

**두 번째 리덕스 모듈 **

//액션 타입 선언
const ADD_TODO = 'todos/ADD_TODO';
const TOGGLE_TODO = 'todos/TOGGLE_TODO';

//액션 함수 선언
let nextId = 1;
export const addTodo = text => ({ type: ADD_TODO, text: text, id: nextId + 1 });
export const toggleTodo = id => ({ type: TOGGLE_TODO, id });


const init = [
    /* {id : 1, text : "" , done : false } */
]

//리듀서
export default function todos(state = init, action) {
    switch (action.type) {
        case ADD_TODO:
            return { ...state, text: state.text.concat(action.text) };
        case TOGGLE_TODO:
            return state.map(user => user.id === action.id ? { ...user, done: !user.done } : user)
        default: return state;
    }
}

위와 같이

1.액션 타입
2.액션 생성함수
3.리듀서 선언

3가지 항목을 통하여 리덕스 모듈을 생성하였습니다.

| 루트 리듀서

루트 리튜서란 위 코드처럼 2가지 이상의 리덕스 모듈 을 만들었을 경우 reducer도 2개입니다.
따라서, 여러개의 리듀서가 존재 할 경우 1개의 리듀서로 합쳐주는 combineReducers 라는 함수를 사용합니다.
해당 함수를 루트 리듀서라고 일컫습니다.

사용법

const rootReducer = combineReducer({ 리듀서 1, 리듀서 2 ... })

위와 같은 방법으로 사용합니다.

그 후 createStore(rootRedcer) 로 해당 리듀서를 합쳐준 store 를 만들어 사용하면 됩니다.

const store = createStore(rootReducer);

이런 store를 전역에서 관리하고 싶을 경우
Provider 를 사용하면 되는데요, 해당 라이브러리를 먼저 받아줍시다.

yarn add react-redux

그 후 Provider를 꺼내와 props 로 store를 넣어주면 됩니다!

 

index.js

<Provider store = {store}>
    <App />
<Provider/>