리듀서 함수

리듀서 (Reducer)

• 리듀서는 상태 변화를 일으키는 함수.

• 현재 상태와 전달받은 액션을 참고하여 새로운 상태를 만들어 반환함.

• 두개의 파라미터를 받아옴.
• state : 이전상태값
• action : 상태변화에 참조할 액션 오브젝트

const initalState={
	count : 0;
}

function reducer(state=initalState, action) {
	switch(action.type){
		'INCREASE':
			return {count: state.count+1} // 변화된 상태값 반환
		'DECRASE':
			return {count: state.count-1} // 변화된 상태값 반환
		default:
			return state; // 이전 상테 그대로 반환
	}
}

1) 특징

• 리듀서는 순수함수여야함 (pure function)
• 이전의 상태는 절대로 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환해야함
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야함.

• 실행할 때마다 다른 결과값이 나타나는 건 순수함수가 아니므로 리듀서 바깥에서 정의.

2) 루트 리듀서

import { combineReducers } from 'redux';
import 리듀서1 from './리듀서1';
import 리듀서2 from './리듀서2';

export default combineReducers({
  리듀서1,
	리듀서2,
  // 다른 리듀서를 만들게되면 여기에 넣어줌..
});

루트 리듀서의 상태값 형태

{
	//리듀서1의 초기값
  리듀서1: {
    color: 'red',
    number: 0,
  },

	//리듀서2의 초기값
	리듀서2: {
    color: 'red',
    number: 0,
  },

  // ... 다른 리듀서에서 사용하는 초깃값들
}