[Redux] 리덕스 기초

※ 생활코딩 Redux 수업을 들으면서 정리하는 글입니다.

Redux 란?

Redux는 자신을 자바스크립트로 만든 어플리케이션을 위한 예측가능한 상태 저장소 이라고 소개하고 있다.

Redux의 주요 개념

① store

리덕스의 핵심은 store으로, 정보가 저장되는 곳이다.
store안에는 실제 정보가 state에 저장된다.
참고로 state에는 직접 접근할 수 없다.

② reducer

function reducer(oldState, action){
	//...
}

var store = Redux.createStore(reducer);

③ render

Redux와 상관없이 UI를 만들어주는 우리가 짤 코드이다.

function render() {
    var state = store.getState();
    //...
    document.querySelector('#app').innerHTML`
    	<h1>WEB</h1>
        ....
    `
}

render는 내부적으로 store에서 데이터를 가져오고, getState는 state에서 값을 가져와 render에게 값을 전달한다. (직접 state에 접근 못하는 이유는 직접 접근하다가 망가질 수 있기 때문)

④ dispatch

1. dispatch는 두가지 일을 하는데 reducer를 호출해서 state값을 바꾼다.
   reducer를 호출할 때, 현재 state의 값과 action 데이터(객체) 총 2개의 값을 전달한다.
   그리고 reducer는 state를 입력값으로 받고 action 값을 참조해서 state를 가공해서 리턴한다. (이 때 가공된 state값이 새로운 state 값이 된다.)
2. subscribe를 이용해서 render 함수를 호출해서 화면을 갱신한다.

store.dispatch({type:'create', payload: {title:title, desc:desc}});

4-1. action

전송되는 객체를 action이라고 한다.

⑤ subscribe

subscribe에 render함수를 등록 해 놓으면 store의 state가 바뀔 때마다 UI가 갱신된다.

store.subscribe(render);

⑥ getState

getState는 state에서 값을 가져와 render에게 값을 전달한다.

간단 정리

1. store에 있는 state에 직접 접근해서 값을 가져오는게 금지되어있기 때문에,
   getState 를 통해서 값을 가져오고, dispatch를 통해 값을 변경시키고,subscribe를 이용해 값이 변경될 때 구동될 함수를 등록해준다.

2. reducer를 이용해 state 값을 변경한다.