[5/18 TIL] Redux, Rdux Toolkit

새로운 프로젝트에서 리덕스와 리덕스 툴킷을 사용하기 위해서 리덕스에 대해 학습해보았다.

1. Redux 란?

자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 이다.

2. Redux Toolkit

리덕스 툴킷은 Redux 로직을 작성하기 위해 리덕스에서 공식적으로 추천하는 방법이다. RKT는 앱 만들기에 필수적으로 여겨지는 패키지와 함수들을 포함한다. Redux 작업을 단순화하고 Redux 앱을 만들기 쉽게 해준다.

RKT 는 저장소 준비, 리듀서 생산과 불변 수정 로직 작성, 상태 "조각"전부를 한번에 작성 등 일반적인 작업등을 단순화 해주는 유틸리티를 포함하고 있다.

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

React 와 Redux 로 새 앱을 만들기 위해 추천하는 방법은 Create React App 을 위한 공식 Redux + JS 템플릿을 사용하는 것이다. 이를통해 Reux Toolkit 와 React Redux 가 React 컴포넌트와 통합되는 이점이 있다.

리덕스

안정버전 설치

# NPM
npm install redux

# Yarn
yarn add redux코드를 입력하세요

보조패키지

npm install react-redux
npm install --save-dev redux-devtools

Redux 자체와는 달리 Redux 생태계의 많은 패키지들은 UMD 빌드를 제공하지 않으므로, 편안한 개발 경험을 위해 Webpack이나 Browserify 같은 CommonJS 모듈 번들러를 사용하기 권장

React Redux 앱 만들기

React와 Redux를 사용하는 새 앱을 만드는 방법으로는 Create React App의 공식 Redux+JS 템플릿을 사용하는 것을 추천합니다. 이를 통해 Redux Toolkit과 React Redux의 React 컴포넌트 통합이 주는 이점을 누릴 수 있다.

3.핵심 개념

만약 앱의 상태가 일반 객체로 설명되어있다고 상상해보면
예를들어 할일 앱의 상태는 다음과 같을 수 있다.

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

이 형태는 상태를 임의로 변경할 수 없도록 하여 재현하기 어려운 버그를 유발한다.

state 에서 무언가를 변경하려면 action 을 전달(dispath)해야 한다. 액션은 무슨 일이 일어났는지 설명하는 평험한 JS 객체이다.

다음은 몇 가지 action 의 예이다.

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

모든 변경사항이 action 으로 설명되도록 하면 앱에서 진행중인 action 을 명확하게 이해할수 있다. 무언가 바뀌었다면 우리는 왜 바뀌었는지 안다. action은 일어난 일의 빵 부스러기와 같다. 마지막으로 상태와 동작을 연결하기 위해서 reducer 라는 함수를 작성한다.

state와 action 을 인수로 취하고 앱의 다음 state 를 반환하는 함수이다.

function visibilityFilter(state = 'SHOW_ALL', action) {
	if(action.type === 'SET_VISIBILITY_FILTER') {
    	return action.filter
    } else {
    	return state
    }
}

function todos(state = [], action) {
	switch (action.type) {
    	case 'ADD_TODO';
        	return state.concat([ text : action.text, completed: false])
        case 'TOGGLE_TODO';
        	return state.map((todo, index) => 
            	action.index === index
                ? {text: todo.text, completed: !todo.completed}
                : todo
            )
        default:
        	return state
    }
}

그리고 우리는 해당 상태키에 대해 두개의 리듀서를 호출하여 앱 전체의 상태를 관리하는 또 다른 리듀서를 작성한다.

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}

이것이 리덕스의 전체 아이디어이다.