11월 26일 (금) redux (reducer)
Reducer
Reducer 는 현재의 state
와 Action
을 이용해서 새로운 state
를 만들어 내는 pure function
이다
장바구니 추가 액션에 대한 코드
const itemReducer = (state = initialState, action) => { switch (action.type) { case ADD_TO_CART: return Object.assign({}, state, { cartItems: [...state.cartItems, action.payload] }) default: return state; } }
Reducer의 Immutability(불변성)
Reducer 함수를 작성할 때 주의해야 할 점이 있다
바로 Redux의 state 업데이트는 immutable한 방식으로 변경해야 한다
Redux의 장점 중 하나인 변경된 state를 로그로 남기기
위해서 꼭 필요한 작업이다
immutable한 방식으로 state를 변경하기 위해서는 Object.assign
을 통해 새로운 객체를 만들어 리턴한다
Object.assign()
Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다Object.assign(target, source)
target에 source를 더하여 반환한다 return target
reducer formet
import <action type> from "<action 파일 위치>" import <상태가 변할 대상> form "<더미 파일>" const <변수> = (state = <상태가 변할 대상>, action) => { switch (action.type) { case <action type 이름> : return Object.assign({}, state, <바뀔 내용 code 작성>) } }
ex
// action type import import { REMOVE_FROM_CART, ADD_TO_CART, SET_QUANTITY } from "../actions/index"; // db import // state 즉 상태가 변할 아이 import { initialState } from "./initialState"; const reducer = (state = initialState, action => { switch (action.type) { case ADD_TO_CART: return Object.assign({}, state, { // cartItem에 객체 추가 code 작성 cartiItem: [...state.cartItems, action.payload] }) } return state; }
Object.assign() 객체 병합
const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, 목표 객체 자체가 변경됨.
같은 속성을 가진 객체 병합
const o1 = { a: 1, b: 1, c: 1 }; const o2 = { b: 2, c: 2 }; const o3 = { c: 3 }; const obj = Object.assign({}, o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 }
Reducer가 여러개일 경우
Reducer은 combineReducers 메소드를 통해 여러 가지의 Reducer들을 하나로 합칠 수 있다
ex
import { combineReducers } from 'redux'; import itemReducer from './itemReducer'; import notificationReducer from './notificationReducer'; const rootReducer = combineReducers({ itemReducer, notificationReducer }); export default rootReducer;
Author And Source
이 문제에 관하여(11월 26일 (금) redux (reducer)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@southbig89/11월-26일-금-redux-reducer저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)