Redux intro

출처 : 생활코딩

 

Redux란?

자바스크립트 앱을 위한 예측 가능한 상태의 저장소

 

소프트웨어를 개발할 때 우리를 위협하는 가장 큰 위험은 복잡성이다. 
리덕스는 애플리케이션의 복잡성을 획기적으로 낮춰서 우리의 코드가 어떤 결과를 가져올지 예측 가능하게 만들어주는 도구이다.

 

어떻게???

가장 중요한 리덕스의 특징은 Single Source of Truth (하나의 상태를 갖는다!)

 

상태(state)는 그냥 객체이다.

하나의 객체 안에 애플리케이션에서 필요한 모든 데이터를 우겨 넣는다.

state = { data: ~~~ }

 

그리고 이 상태는 아주 중요해서 외부로부터 철저하게 차단시킨다.

오로지 허용하는 함수만을 통해서 상태(state) 데이터에 접근할 수 있다.

그 함수들에는 dispatcher, reduce 가 있다.

이 함수들만이 상태(state)값을 바꿀 수 있다. 절대 상태(status)를 직접 바꿀 수 없다!

 

데이터를 가져갈 때도 getState라는 함수를 통해서만 가져갈 수 있다.

 

데이터를 외부에서 직접적으로 제어할 수 없기 때문에 예기치않게 state값이 바뀌는 문제를 사전에 차단! -> 그래서 예측가능하게 만드는 것이다.

 

state값이 바뀔 때마다 state의 데이터를 사용하는 여러가지 부품들에게 말해주는 함수도 있다.

 

리덕스의 활용성

 

1. 리덕스를 통해서 UNDO와 REDO를 굉장히 쉽게 할 수 있다. 각각의 state 값들을 생성할 때 철저하게 통제하고 데이터를 만들 때 원본을 바꾸는 것이 아니라 원본을 복제하고 복제한 데이터를 수정해서 그것을 새로운 원본으로 만드는 작업을 하고 있기 때문에 각각의 상태의 변화가 서로에게 영향을 전혀 주지 않는 독립된 상태를 유지할 수 있어서 이걸 잘 이용해서 이전의 상태를 잘 찾아와주면 UNDO와 REDO가 가능하다.

 

2. 모듈리로딩도 가능해진다. 모듈리로딩이란 코드를 작성하면 자동으로 우리가 작성한 코드가 애플리케이션에 반영되는 것이다.

 

 

 

 

state와 render의 관계

 

리덕스의 핵심은 store 이다. store를 은행이라고 생각해보자.

store는 정보가 저장되는 곳이다.

그리고 store 안에는 state라는 실제 정보가 저장된다. (이 state에는 직접 접근을 절대 할 수 없다!)

 

store를 만들 때 제일 먼저 해야할 것은 reducer라는 함수를 만들어서 공급해주어야 한다.

 

그러면 코드로 한번 살펴보자.

function reducer(oldState, action) {} // reducer 함수를 만들어 준다.

var store = Redux.createStore(reducer) // store를 생성할 때 reducer 함수를 인자로 주어야 한다.

reducer은 리덕스에서 매우 중요하다!

 

그 다음에 render 라는 것이 이다.

이것은 우리가 짤 코드이며, UI를 만들어주는 역할을 한다.

 

그리고 store에 접근하기 위해서는 dispatch, subscribe, getState 함수들을 통해서 접근할 수 있다.

 

이 함수들과 render가 협력해서 애플리케이션을 만드는 것이다.

 

즉 render와 store에 접근하는 함수들 중 하나인 getState를 이용해서 짠 코드를 보면 다음과 같다.

function render() {
	let state = store.getState(); // 여기서 getState로 state값을 가지고 와주고
    document.querySelector('#app').innerHTML = '~~' // 여기서 그 state 값을 사용한다.
}

render는 state 값을 반영한 UI를 만드는 함수이다.

 

이 때 state 값이 바뀔 때마다 render 함수가 알아서 UI를 바꿔주게 만드려면 위에서 언급한 subscribe 함수를 사용하면 된다!

바로 이렇게 !

store.subscribe(render);

이렇게 하면 state 값이 바뀔 때마다 render 함수가 호출되어서 UI가 바뀐다.

 

 

action 과 reducer

 

만일 우리의 웹사이트에서 input 창에 사용자가 어떤 정보를 입력하고 submit 을 하는 기능이 있다면?

코드로는 다음과 같이 나타날 것이다.

 

<form onsubmit="
	store.dispatch({type:'create', payload:{title:title, desc:desc})
    "
    ...
   

여기서 action 은 바로 {type:'create', payload:{title:title, desc:desc} 이 객체이다.

이 action 객체가 dispatch에게 전달되는 것이다.

 

dispatch의 역할?

1. reducer를 호출해서 state 값을 바꾼다.

2.그리고 나서 subscribe를 이용해서 render 함수를 호출해준다.

 

먼저 1번, reducer를 호출해서 state 값을 바꾼다. 

dispatch가 reduce를 호출할 때는 전달인자로 현재의 state 값과 action 객체를 전달한다.

function reducer(state, action){
	if(action.type === 'create'){ // dispatch의 action.type이 create이면?
    	let newContents = oldState.contents.concat();
        let newMaxId = oldState.maxId+1;
        newContents.push({id:newMaxId, title:action.payload})
        return Object.assign({}, state, { // state의 새로운 값을 리턴
        	contents: newContents,
            maxId: newMaxId,
            mode: 'read',
            selectedId: newMaxId
        })
}

즉 위 함수의 전달인자만 보자면, state를 입력받고 action을 참고해서 새로운 state를 만들어서 리턴하는 state의 가공자이다.

=> reducer가 리턴하는 값은 새로운 state 값이다.

 

그러니까 state가 바꼈으니까 2번, subscribe를 이용해서 render 함수를 호출해주는 것이고 그에 따라 UI가 바뀌게 되는 것이다.

 

 

다시 함수들의 역할을 정리해보자면? state를 바꾸기 위해서

getState 를 통해서 값을 가져오고

dispatch 를 통해서 값을 변경시키고 

subscribe 를 이용해서 값이 변경되었을 때 구동이 될 함수들을 등록해준다.

그 state 값을 변경하기 위해선 reduce를 사용 해야 한다.