redux

Redux 정리 (3) : dispatch, useSelector, 컴포넌트가 상태를 업데이트하는 과정 총정리

dispatch dispatch는 Store의 메서드로, action을 Store에 전달하여 발생시키는 역할을 한다. store.dispatch(action)의 형태로 사용한다. subscribe subscribe는 Store의 메서드로, Store의 state(상태)가 변경될 때마다 특정 함수를 자동으로 호출한다. 컴포넌트에서 Store의 상태를 실시간으로 감지하고, 상태가 업데이트되면 자동으로 리렌더링을 할 수 있게 한다. * subscribe 함수를 실제로 사용할 일은 크게 없다. 보통 redux의 connect 함수 또는 react redux의 useSelector 훅을 사용한다. useSelector useSelector 훅(hook)은 redux store의 state를 component와 연..

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..

Redux 정리 (1) : 기본 파일 구조 및 reducers (rootReducer, initialState, switch문, Store)

본격적인 프로젝트를 처음 만들다가 리덕스에 대한 기초가 부족함을 느껴 이곳저곳에서 배운 내용을 총 정리하려 한다. 기본 파일 구조 다양한 구조를 사용하지만 나는 아래 형식으로 파일 구조를 짰다. | components |-- Layout.js |-- Header.js |-- Footer.js ... | pages |-- Auth.js |-- Home.js |-- Join.js ... | Redux // 이부분! |-- store.js |-- actions |-- |-- itemActions.js |-- |-- userActions.js ... |-- reducers |-- |-- rootReducer.js |-- |-- itemReducer.js |-- |-- userReducer.js ... actio..

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..

React : state 공유하는 "Redux" (state 변경함수/파라미터/함수분리)

state 변경하는 법 useState()와는 다른 방식을 써야 한다. state를 수정해주는 함수를 만들고, 그 함수를 실행해야 할 때 store.js에 요청해야 한다. store.js에서 state 변경함수 만들기 let user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(){ // state 값 변경함수 1 return 'Park' }, changeFullname(){ // state 값 변경함수 2 return 'Kim Noran' } } }) export let { changeName, changeFullname } = user.actions // 함수 export store.js에 변경함수를 만든다...