[redux] 리덕스란?

 

function todoApp(state=initialState, action){ 
	switch(action.type){ 
    	case SET_VISIBILITY_FILTER: 
        	return Object.assign({}, state, { visibilityFilter: action.filter }) 
        default: 
        	return state 
     } 
 }

const ADD_TODO = 'ADD_TODO' // action의 type을 정의

function addTodo(text){ // action creator
	return{
		type: ADD_TODO,
		text
	}
}

출처

리덕스는 javacript app을 위한 예측가능한 state container이다.
React 뿐만 아니라 Angular등등 다양한 프레임워크와도 작동되게 설계되었다.

리덕스는 action에 반응하여 상태를 변경하기 때문에 리액트 같이 UI를 상태에 대한 함수로 기술하는 프레임워크와 특히 잘 어울린다.

리액트로 프로젝트를 진행하게 되면, Component는 local state를 가지게 되고, 어플리케이션은 global state를 가지게 된다.

local state: 각각의 Component가 가지는 state. 어플리케이션은 이 state를 기반으로 만들어진다. global state: 유저의 로그인의 유무에 따라 어플리케이션의 state가 달리보이는 것을 들 수 있다. 어플리케이션 전체에서 global state는 유지된다. (local state는 global stete를 공유한다는 것)

리액트로만 프로젝트를 진행하게 되는 경우, 어플리케이션은 local state, global state를 관리하기 어렵다.
App에서 만든 상태값을 하위 컴포넌트에게 전달해야 하는데, 하위 컴포넌트가 수직관계로 길게 이어저서 가장 하위에 있는 컴포넌트에게 그 상태를 전달하기 위해서, 상위 컴포넌트들에게 인자로 전달해야할 뿐만 아니라, 상위 컴포넌트 중 그 상태를 사용하지 않는 컴포넌트에게도 인자를 넘겨주게 된다.

또한, 로그인 기능을 구현해서 각 Component가 로그인 상태를 알고 있어야 하는 경우, global state에 로그인 정보를 저장해야 하는데,
그것을 모든 Component에 유지하기 어렵다.
(유저의 인증정보를 모든 Component에 Props로 계속해서 전달해야 하는데, 그게 어렵다.)

하지만 리덕스를 사용하게 되면, 하나의 store를 통해서 global state를 포함한 모든 state를 저장하고 유지할 수 있게 되며,
원하는 component로만 data를 전달할 수 있게되어서 이러한 문제를 해결할 수 있다.

페이스북에서만든 Flux라는 디자인 패턴이 있다.
MVC구조의 단점을 보완할 목적으로 개발된 Flux는 대규모 프로젝트에서 너무 복잡해지는 MVC구조의 단점을 보완하는 단방향 데이터 흐름의 구조이다.

근데, 리덕스는 Flux의 구현체라고 불리기도 한다.

즉, 리덕스는 Flux의 몇 가지 중요한 특성에 영감을 받아 개발되었다.

Flux는 다수의 store와 dispatcher를 가지고 있지만, redux는 dispatcher가 없고,
하나의 root에 하나의 store만이 존재하고, 순수함수에 의존하는데, 이 순수 함수는 이것들을 관리하는 추가적인 entity가 없어도 조합하기가 쉽다고 한다.

즉, 리덕스는 대규모 프로젝트에서의 MVC패턴을 단점을 개선한 Flux패턴을 좀 더 쉽고 정돈된 형태로 쓸 수 있게 도와주는 라이브러리라고 볼 수 있다.

Redux 기본 개념

• Actions (액션) : 어플리케이션의 Store, 즉 저장소로 data를 보내는 방법이다. view에서 정의되어있는 액션을 호출하면 action creator는 어플리케이션의 state를 변경해준다. \n action의 type은 일반적으로 문자열 상수로 정의되며, 정의된 action type은 action creator를 통해 사용된다.

const ADD_TODO = 'ADD_TODO' // action의 type을 정의

function addTodo(text){ // action creator
	return{
		type: ADD_TODO,
		text
	}
}

• Reducers (리듀서): action을 통해 어떠한 행동을 정의했다면, 그 결과 어플리케이션의 상태가 어떻게 바뀌는지 특정하게 되는 함수이다. \n 즉, 리듀서 함수는 action의 type에 따라 변화된 state를 반환하는 함수.
  
  
• Store (스토어) : 무엇이 일어날지를 나타내는 action, action에 따라 상태를 수정하는 reducer를 저장하는 어플리케이션에 있는 단 하나의 객체이다. 스토어를 생성하고 reducer를 연결하여 어플리케이션에 연결하게 된다.

function todoApp(state=initialState, action){ 
	switch(action.type){ 
    	case SET_VISIBILITY_FILTER: 
        	return Object.assign({}, state, { visibilityFilter: action.filter }) 
        default: return state 
     } 
 }

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

let store = createStore(todoApp);