[리액트] Redux 사용 (addItem / state.push )

주문버튼누르면 state에 새로운 상품추가
- addItem()

detail 페이지에서 주문하기 버튼 누르면

cart.js 에 상품 하나 추가해보기.

 initialState: [
    { id: 0, name: "White and Black", count: 2 },
    { id: 2, name: "Grey Yordan", count: 1 },
    { id: 1, name: "Red Knit", count: 1 }, // 추가해준 데이터. 이런 식으로 추가하기.
  ],

이런 식으로 배열 데이터 하나 더 추가해주면 됨.

addItem() 사용

state 수정함수 addItem() 사용해주기

{ id: 1, name: "Red Knit", count: 1 }

저 id 를 위에 있는 cart State 에 추가해달라고 코드 짜기.

state.push 사용
- array 뒤에 자료 추가해주는 함수

  addItem(state) {
      state.push({ id: 1, name: "Red Knit", count: 1 });
    },

저 배열을 push (추가)해 줄 수 있음.

근데 이런 식으로 하면 1번 상품만 추가가 됨

addItem 과 state.push 의 사용법 ( 중괄호와 소괄호가 써져 있는데 어떻게 사용하는 지 ) >>

 addItem(state, action) {
      state.push(action.payload);
    },

addItem 리듀서 함수

이 리듀서 함수는 상태 배열에 새로운 항목을 추가합니다.
이 함수는 두 가지 매개변수를 받습니다
( 리듀서 함수는 현재 상태(state)와 액션(action)을 받습니다 )

• state: 현재 상태, 즉 현재의 장바구니 항목들의 배열입니다.
• action: 액션 객체로, 여기에 새로운 항목이 payload 속성으로 포함됩니다.
  

---

state.push의 사용법

state.push는 자바스크립트 배열 메서드로, 배열의 끝에 새로운 항목을 추가 합니다.
push 메서드는 배열의 길이를 반환하지만,
여기서는 리덕스 툴킷의 createSlice와 Immer 라이브러리를 사용하여 상태를 불변하게 관리하기 때문에,
직접 상태를 변경하는 것처럼 보이지만 실제로는 불변성을 유지합니다

state.push 구문

• state는 배열입니다.
• push는 배열 메서드로, 새로운 요소를 추가합니다.
• action.payload는 추가하려는 새로운 항목입니다.

 

state.push 분석 >>
state.push(action.payload)는
state 배열의 끝에 action.payload 객체를 추가합니다.

예제 >>
만약 새로운 항목 { id: 3, name: "Blue Shirt", count: 1 }를 추가하려고 한다면:
action.payload는 { id: 3, name: "Blue Shirt", count: 1 }입니다.
state.push(action.payload)는 배열의 끝에 이 객체를 추가합니다.

addItem() 안에 있는 state 와
state.push의 state 의미 >>>

1. addItem(state, action)의 state
state는 현재 리듀서가 관리하는 상태를 의미합니다.
이 상태는 initialState에 정의된 초기 상태입니다.
여기서는 장바구니 항목들의 배열입니다.

2. state.push(action.payload)의 state
이 state는 addItem 함수의 첫 번째 매개변수인 state와 동일합니다.
즉, 현재 장바구니 항목들의 배열을 의미합니다.
state.push(action.payload)는 이 배열의 끝에 새로운 항목을 추가하는 것을 의미합니다.

---

상태(state) 설명  >>
initialState: 초기 상태는 배열입니다.
배열에는 두 개의 객체가 있습니다
: { id: 0, name: "White and Black", count: 2 }
와 { id: 2, name: "Grey Yordan", count: 1 }.

addItem(state, action): state는 이 초기 상태 배열을 가리킵니다.

action은 액션 객체로, 여기에 추가할 새로운 항목이 담겨 있습니다.

state.push(action.payload): state는 여전히 현재 상태 배열입니다.

push 메서드는 배열의 끝에 새로운 항목을 추가합니다.

action.payload는 추가할 새로운 항목입니다.

---

요약 >>
addItem(state, action)에서 state는 현재 장바구니 항목들의 배열입니다.
state.push(action.payload)에서 state는 동일한 배열을 의미하며,
push 메서드를 사용하여 이 배열에 새로운 항목을 추가합니다.
state는 리듀서 함수 내부에서 현재 상태를 가리키는 매개변수로 사용됩니다.

매개변수하고 메서드의 정의 ? >>

매개변수 (Parameter)
매개변수는 함수나 메서드가 실행될 때 외부에서 전달받는 값들을 가리키는 변수입니다.
함수나 메서드를 정의할 때, 매개변수는 괄호 안에 지정됩니다.
매개변수는 함수 내부에서 사용되며,
함수가 호출될 때 실제 값(argument)이 이 매개변수에 대입됩니다.

function greet(name) {
  console.log("Hello, " + name + "!");
}​

여기서 name이 매개변수입니다.
이 함수는 name이라는 값을 받아서 인사를 출력합니다.

greet("Alice"); // "Hello, Alice!" 출력​

greet 함수가 호출될 때 "Alice"가 매개변수 name에 전달됩니다.

메서드 (Method)
메서드는 객체에 속한 함수입니다.
자바스크립트에서 메서드는 객체의 속성으로 정의된 함수를 의미합니다.
메서드는 일반적으로 객체의 데이터를 조작하거나 객체와 관련된 작업을 수행하는 데 사용됩니다.

let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};​

여기서 greet은 person 객체의 메서드입니다.
이 메서드는 person 객체의 name 속성을 사용하여 인사를 출력합니다.

person.greet(); // "Hello, Alice!" 출력​

person 객체의 greet 메서드를 호출하면,
this.name은 person 객체의 name 속성인 "Alice"를 가리킵니다.

---

요약 >>>

매개변수 (Parameter): 함수나 메서드가 실행될 때
외부에서 전달받는 값들을 가리키는 변수입니다.
함수 정의 시 괄호 안에 지정됩니다.

예: function greet(name) { ... }에서 name이 매개변수입니다.

메서드 (Method): 객체에 속한 함수입니다.
객체의 데이터를 조작하거나 객체와 관련된 작업을 수행합니다.

예: let person = { greet: function() { ... } }에서 greet은 person 객체의 메서드입니다.

---

addItem 리듀서 함수에서 state와 action은 매개변수이고,
state.push는 배열 객체의 메서드

배열매서드란? >>>

addItem 이거도 리듀서 함수니까 메서드인가?
메서드는 함수를 의미하는 건가? >>>

payload 기입

 addItem(state, action) {
      state.push(action.payload);
    },

파라미터 action 추가해주고 payload 활용

payload 를 push 함수에 집어넣어줌

거의 action 하고 payload 는 실과 바늘

파라미터 action(a) 추가하는 이유 >>

파라미터 action의 이유: 상태 변경에 필요한 데이터 전달
리듀서 함수가 상태를 변경하기 위해
필요한 데이터를 전달받기 위해 action 파라미터가 필요합니다.

예시: 새로운 항목을 장바구니에 추가

let cart = createSlice({
  name: "cart",
  initialState: [
    { id: 0, name: "White and Black", count: 2 },
    { id: 2, name: "Grey Yordan", count: 1 },
  ],
  reducers: {
    addItem(state, action) { // 여기에 action 파라미터가 필요합니다.
      state.push(action.payload); // action.payload에 새로운 아이템의 데이터가 있습니다.
    },
  },
});

1. 상태(state)
현재 장바구니에 있는 아이템들의 목록입니다.

2. 액션(action)
장바구니에 새로운 아이템을 추가하기 위한 데이터입니다.
액션 객체에는 이 데이터가 들어 있습니다.

let action = {
  type: 'cart/addItem',
  payload: { id: 3, name: "Blue Shirt", count: 1 }
};​

여기서 action.payload에는 추가할 새로운 아이템의 데이터가 들어 있습니다.

쉽게 요약 >>

목적: 리듀서 함수가 상태를 변경할 때 필요한 데이터를 전달받기 위해
action 파라미터가 필요합니다.

데이터 전달: action.payload에 새로운 아이템의 데이터가 들어 있어서,
이를 통해 리듀서 함수가 정확히 어떤 아이템을 추가해야 할지 알 수 있습니다.

작동 방식: 리듀서 함수는 action.payload를 사용해 새로운 아이템을 상태 배열에 추가합니다.


action 파라미터를 통해 상태 변경에 필요한 데이터를 리듀서 함수로 전달할 수 있습니다.

payload 를 push 함수에 집어넣어주는 이유 >>

액션 객체

payload에 새로운 항목 데이터를 담고 있는 액션 객체입니다:

let action = {
  type: 'cart/addItem',
  payload: { id: 3, name: "Blue Shirt", count: 1 }
};​

이유: 새로운 항목을 배열에 추가하기 위해

push 함수는 배열의 끝에 새로운 항목을 추가하는 자바스크립트의 메서드입니다.
payload는 우리가 추가하고 싶은 새로운 항목의 데이터를 담고 있습니다.
따라서, 새로운 항목을 배열에 추가하기 위해 payload를 push 함수에 넣어줍니다.
약간 오브젝트 형식으로 담아져 있어서 .payload 이렇게 불러오는듯

push 메서드
: 배열의 끝에 새로운 항목을 추가합니다.

다양한 object 자료 집어넣게 되면,

해당 자료가 기존 state 에 추가가 된다.

export

export let { addCount, addItem } = cart.actions;

export 해서 갖다 쓸 수 있게끔 하기. 

 Detail 페이지에서 쓸거라서 import 

import { addItem } from "../store";

store.js 에 있던 함수를 갖다 써보기.

useDispatch 도 import

import { useDispatch } from "react-redux";

Detail 페이지 하단에 있는 주문하기 버튼 찾기

<button
            className="btn btn-danger"
            onClick={() => {
              dispatch(addItem({ id: 1, name: "Red Knit", count: 1 }));
            }}
          >
            주문하기
</button>

버튼 누르면 기능 실행 

addItem 함수 동작시키게끔 dispatch 써서 코드 짜기.

 

addItem 의 

중괄호 안에다가 상품을 집어넣으면 

그 상품을 state 에다가 추가시켜줌.