11月26日(金)

4215 ワード
redux プロジェクト練習 TIL テキストリンク

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の不変性


Reducer関数を記述する際の注意点
まさにReduxのstate更新は変わらず変更する必要があります
これはReduxの利点の1つであり、변경된 state를 로그로 남기기に必要な作業である.
stateを変更せずに変更するには、Object.assignで新しいオブジェクトを作成して戻ります.
Object.assign()
Object.assign()メソッドは、ソースオブジェクトのリスト可能なすべての自己属性をコピーし、ターゲットオブジェクトに貼り付けます.ターゲットオブジェクトに戻ります
Object.assign(target, source)
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は、Reducers法を組み合わせることによって、複数のReducerを組み合わせることができる
ex
import { combineReducers } from 'redux';
import itemReducer from './itemReducer';
import notificationReducer from './notificationReducer';

const rootReducer = combineReducers({
  itemReducer,
  notificationReducer
});

export default rootReducer;
条件を満たす項目を表示
Prototype