728x90
리듀서
변화를 일으키는 함수.
리듀서 함수 생성
파라미터를 두 개 받는 리듀서를 생성하는 예제소스입니다.
첫 번째 파라미터는 현재 상태이고,
두 번째 파라미터는 액션 객체입니다. jsbin.com 에서 간단히 실습합니다.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js">
</script>
</body>
</html>
javascript
//12.2.2 액션과 액션 생성 함수
//액션 : 스토어에서 상태 변화를 일으킬 때 참조하는 객체. type값 필수
// 대문자, 밑줄을 조합하여 만듭니다.
const INCREMENT = 'INCREMENT'; //숫자의 값을 더하는 액션
const DECREMENT = 'DECREMENT'; //숫자의 값을 빼는 액션
const increment = (diff) => ({
type: INCREMENT,
diff: diff
});
const decrement = (diff) => ({
type: DECREMENT,
diff: diff
});
//console.log(increment(1));
//console.log(decrement(1));
/* --==>
[object Object] {
diff: 1,
type: "INCREMENT"
}
[object Object] {
diff: 1,
type: "DECREMENT"
}
*/
//12.2.3 변화를 일으키는 함수, 리듀서
const initialState = {
number: 0,
foo: 'bar',
baz: 'qux'
};
// state = initialState : ES6문법, state값이 undefined라면
// initialState를 기본 값으로 사용한다는 의미입니다.
function counter1(state = initialState, action) {
switch(action.type) {
case INCREMENT:
return { number: state.number + action.diff };
case DECREMENT:
return { number: state.number - action.diff };
default:
return state;
}
}
//Object.assign을 이용한 객체 병합.
function counter2(state = initialState, action) {
switch(action.type) {
case INCREMENT:
return Object.assign({}, state, {
number: state.number + action.diff
});
case DECREMENT:
return Object.assign({}, state, {
number: state.number - action.diff
});
default:
return state;
}
}
//ES6 문법의 전개 연산자(...)를 이용한 객체 병함
function counter3(state = initialState, action) {
switch(action.type) {
case INCREMENT:
return {
...state,
number: state.number + action.diff
}
case DECREMENT:
return {
...state,
number: state.number - action.diff
}
default:
return state;
}
}
console.log('counter1');
console.log(counter1(undefined, increment(1)));
console.log('counter2');
console.log(counter3(undefined, increment(1)));
console.log('counter3');
console.log(counter3(undefined, increment(1)));
728x90
'Study Note > React' 카테고리의 다른 글
| React #라우트 코드 스플리팅 #비동기적으로 코드 불러오기 (0) | 2021.03.15 |
|---|---|
| React #SPA 개발하기 #1. 절대 경로 설정, 라우팅 (0) | 2021.03.14 |
| React #ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. (0) | 2020.10.12 |
| error #yarn: 'yarn' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 오류해결 (0) | 2020.10.04 |
| React.js #JSX 인라인 스타일링 (0) | 2019.09.03 |
댓글