Redux 기본

🔹 state와 render의 관계

store

• 리덕스의 핵심 ex.은행
• 정보가 저장되는 곳
• store에 접근할때는 직접 접근할 수 없고 누군가를 통해서만 접근할 수 있다.

store 기능

• state : 실제 정보가 저장되는 곳
• reducer : store를 사용하려면 가장 먼저 reducer라는 함수를 만들어서 공급해줘야 한다. (redux에서 중요한 역할)

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

var store = Redux.createStore(reducer) // store 생성

createStore를 생성할때는 reducer인자가 꼭 필요하다.

• render : 리덕스(store)와는 상관없이 UI를 만들어주는 역할을 하는 내가 짜야하는 코드

function render() {
	var state = store.getState();
	//...
}

render의 역할은 state값을 참조해서 브라우저의 UI를 만드는 것이다.

• dispatch, subscribe, getState : 은행에서 마치 직원역할을 해주는 것처럼 state에 접근할때 사용하는 함수

• subscribe : store의 state값이 바뀔때마다 render함수가 호출된다면? 그렇다면 state값이 바뀔때마다 UI가 업데이트된다.

store.subscribe(render)

🔹 action과 reducer

사용자가 값을 입력하고 submit 버튼을 누른다면?

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

{ type:'create',payload:{title:title,desc:desc} } 이 객체를 action이라고 한다.

dispatch역할 (두가지)

1. reducer를 호출해서 state의 값을 바꾼다.
2. 그리고 그 작업이 끝나면 subscribe를 이용해서 render함수를 호출해준다. (그러면 브라우저의 화면이 업데이트 된다.)

첫번째 작업 => dispatch가 reducer를 다루는 방법

• dispatch가 reducer를 호출할때 2개의 값을 전달한다.

1. 현재의 state 값
2. action

코드 예시 )

function reducer(state,action) {
	if(action.type === 'create') {
		//..

		return Object.assign({},state, {
			key:value
		})
	}
}

• 객체가 return되고 return된 객체는 state의 새로운 값이 된다.

즉, state를 입력값으로 받고 action을 참조해서 새로운 state값을 만들어내서 리턴해주는 state를 가공하는 가공자이다.

reducer가 리턴하는 값이 새로운 state

두번째 작업 ⇒ subscribe를 이용해서 render함수를 호출

state가 바뀌었으니 render가 호출되어야한다.

• dispatch가 subscribe에 등록되어있는 구독자들을 다 호출해준다.
• 그러면 render가 호출이 되면서 getState가 state를 가져오고
• render호출되어 화면을 갱신해준다.
• 이러한 과정을 거치면 새로운 state에 맞게 UI가 바뀌게 된다.

📃 정리

1. 핵심은 state
2. 그 다음 핵심은 state를 기반으로 화면에 그려준다. (render)
3. state에 직접 접속하는게 금지되어있기 때문에 getState를 통해 값을 가져오고
4. dispatch를 통해 값을 변경시키고
5. subscribe를 이용해 값이 변경됐을때 구동될 함수들을 등록해준다.
6. 또 하나의 핵심은 reducer를 통해서 state의 값을 변경한다.

출처

• 생활코딩 - Redux