Redux 시작하기 / 기본 구조 (Reducer, Subscribe, Dispatch란?)

node.js로 redux 실행하기

 

freecodecamp.org

 

1. Reducer function이란?

리듀서 함수는 표준 자바스크립트 함수이며 리덕스 라이브러리에 의해 호출된다.

 

인풋은 항상 2개의 파라미터(전의 상태, 액션)를 가지고,

새로운 상태의 객체를 아웃풋으로 갖는 순수한 함수이다. (같은 인풋 → 같은 아웃풋)

 

즉, 

Inputs : Old State + Dispatched Action

⬇️

Output : New State Object

 

 

또한 리듀서 함수는 Side effects 를 생성하지 않아야한다. 예를 들면, 서버에 HTTP 요청을 보낸다거나 로컬 저장소에 데이터를 보내는 등의 코드는 없어야 한다.

---

const redux = require('redux'); //node.js syntax (= import redux)

const counterReducer = (state = {counter : 0}, action) => {
  //return new state (object) replacing exsisting state
	if(action.type === 'increment') {
    	return {
      		counter : state.counter + 1
    	};
	} else {
		return state;
	}
}

console.log(store.getState()); //output : 1

const store = redux.createStore(counterReducer); //generate store
// store 내의 데이터는 리듀서 함수에 의해 결정된다. 또한 코드를 처음으로 실행할때 리듀서가 실행되고 기본 action을 한다 (= 초기 데이터를 만든다).

위 코드에서 중요한 것은 store이 처음 생성되고 그 이후 바로 counterReducer 함수가 한번 실행된다는 것이다. 따라서 state의 초기 상태를 { counter : 0 }으로 초기화했기 때문에, return 문을 한번 수행한 후 { counter : 1 }이 콘솔에 찍히게 된다.

 

2. Subscriber function이란?

const counterSubscriber = () => {
    //subscriber 함수는 상태가 변경될 때 마다 trigger 됨
    const latestState = store.getState(); //createStore에서 생성된 store의 메소드 (업데이트 된 상태 제공)
    console.log(latestState);
}

store.subscribe(counterSubscriber); //subscribe는 직접 실행하지 않고 리덕스가 해당 코드를 수행한다.

subscribe는 직접 실행하지 않고 리덕스가 해당 코드를 수행한다.

 

 

3. dispatch({})와 action

store.dispatch({ type: 'increment' });

dispatch 함수에서의 Action이란  type 프로퍼티를 식별자역할로써 가지고 있는 자바스크립트 객체이다.

type이 string으로 unique해야 리듀서로 넘어갔을때 지정한 reducer function 코드를 할 수 있다.