Redux - 사용해보기

리덕스의 기본적인 내용은 아래 글을 참고해 주세요.

https://sty110357.tistory.com/78

 

 

----

 

1. 기본적인 사용법

• 리덕스의 구성요소인 Actions, Reducer, Store를 생성하고 State를 변경해 봅니다.

 

Redux 설치

npx create-react-app redux-test && cd redux-test
npm i redux

 

Action Creator 생성

/* actions.js */

// 액션 타입 문자열의 오타 실수를 방지하기 위해 상수로 선언
export const ADD_TODO = "ADD_TODO";

// 액션 생성자 함수 선언
export default function addTodo(todo) {
  return {
    type: ADD_TODO,
    todo
  };
}

 

Reducer 생성

/* reducers.js */

import { ADD_TODO } from './actions';

const initialState = [];

// 리듀서 순수 함수, 이전 상태의 초기값을 빈 배열로 설정
function todoApp(previousState = initialState, action) {

  switch (action.type) {
    case ADD_TODO:
      return [ ...previousState, action.todo ];
    default:
      return previousState;
  }
  
}

export default todoApp;

 

Store 생성

/* store.js */

import { createStore } from 'redux';
import todoApp from './reducers';

// 리듀서를 인자로 전달해 스토어 생성
const store = createStore(todoApp);

export default store;

 

App.js 수정

...

import store from "./redux/store";
import addTodo from "./redux/actions";

// store.subscribe: 스토어의 상태가 변경되면, 인자로 받은 함수를 호출하고 unsubscribe 함수를 반환합니다.
const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});

// store.dispatch: 액션 생성자를 인자로 받아서 스토어의 상태를 변경합니다.
store.dispatch(addTodo("coding"));
store.dispatch(addTodo("read bood"));
store.dispatch(addTodo("eat"));

// unsubscribe: 더 이상 스토어의 상태 변화를 구독하지 않도록 합니다.
unsubscribe();
store.dispatch(addTodo("coding"));
store.dispatch(addTodo("read bood"));
store.dispatch(addTodo("eat"));

export default function App() {
  return (
    <div className="App">
      ...
    </div>
  }
}

 

2. combineReducer

• 앱이 점점 복잡해지면, 리듀서 함수를 분리하고 싶어질 것입니다.
• 이때, combineReducer를 사용하면, 분리된 리듀서들을 인자로 받아서 하나의 리듀싱 함수로 변환해줍니다.

 

두 개의 리듀서 생성

/* todo.js */

import { ADD_TODO, COMPLETE_TODO } from '../actions';

const initialState = [];

export default function todos(previousState = initialState, action) {

  switch (action.type) {
    case ADD_TODO:
      return [ ...previousState, {text: action.text, done: false} ];
	...
  }

}

/* filter.js */

import { SHOW_ALL, SHOW_COMPLETE } from '../actions';

const initialState = 'ALL';

export default function filter(previousState = initialState, action) {
  switch (action.type) {
    case SHOW_ALL:
      return "ALL";
    ...
  }
}

 

combineReducer로 두 리듀서를 하나의 리듀서로 병합

import { combineReducers } from 'redux';
import todos from './todos';
import filter from './filter';

const reducer = combineReducers({
  todos,
  filter
});

export default reducer;

 

Store에 combineReducer 전달

import { createStore } from 'redux';
import reducer from './reducers/reducer';

const store = createStore(reducer);

export default store;