Payload

Redux 정리 (2) : actions (액션생성자함수, type, payload)

actions action은 상태(State)에 변화를 발생시키는 객체이다. action 객체는 type 필드를 필수로 가지고 있어야 하며, 그 외의 값은 개발자 맘대로 넣을 수 있다. 참고로 ajax로 json 데이터를 받아올 때는 actions 파일에 넣게 된다. action 생성자함수 파일 개요 (userActions.js) 파일의 user자리는 개발자 마음대로 action 객체의 목적에 따라 작명하면 된다. (reducer와 동일) 이 파일에는 action 객체를 반환하는 액션 생성자 함수를 작성하게 된다. 이 파일은 일반적으로 아래처럼 작성된다. export const login = (username, password) => { return { type: 'LOGIN', payload: { us..

React : 상품을 장바구니에 추가하기 (immer, redux, action, payload)

조건 상세페이지에서 버튼을 누르면 장바구니페이지에 해당 상품이 업데이트된다. 풀이 store.js import { createSlice } from '@reduxjs/toolkit' let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 1, name : 'Red Knit', count : 1} ] , reducers : { ... addCart(state, action){ const newCart = action.payload; return [...state, newCart]; } } }) export let { changeName, changeCount, add..

React : 장바구니 제품 수량변경 (map, redux, action, payload)

조건 map으로 data를 불러온 장바구니 테이블에서 수량변경 버튼을 누르면, array에서 누른 버튼 옆에 있는 상품과 id값이 같은 상품을 찾아서 count값을 1 플러스 연산한다. 풀이 component.js { state.cart.map((a, i)=> { state.cart[i].id } { state.cart[i].name } { state.cart[i].count } { dispatch(changeCount(state.cart[i].id)) }}>➕ ) } store.js let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Gre..