[리액트] Redux 사용 (배열 state 데이터 바인딩, 변경 / increase() / 다수 state)

object인 state의 데이터 바인딩

object 자료 만들어주기

let user = createSlice({
  name: "user",
  initialState: "kim",
  reducers: {
    changeName(state) {
      return "john " + state;
    },
  },
});

여기서 "kim" 을 object 자료로 변경

, age도 추가

let user = createSlice({
  name: "user",
  initialState: { name: "kim", age: 20 },
  reducers: {
    changeName(state) {
      return "john " + state;
    },
  },
});

object 자료 데이터 바인딩

{state.user}의 장바구니

원래 사용했던 것에서

{state.user.name}의 장바구니

원하는 것 만 갖다 쓸 수 있도록 .name 뒤에 추가.

---

object 자료 변경하는 방법

1) return 문 활용
= changeName( state 변경함수 ) 활용해서 return 문 오른쪽에 새로운 state 코드 짜주기.

버튼 누르면 park 으로 변하는 코드 짜기

let user = createSlice({
  name: "user",
  initialState: { name: "kim", age: 20 },
  reducers: {
    changeName(state) {
      return { name: "park", age: 20 };
    },
  },
});

리턴 오른쪽에다가 새로운 state 코드 짜주기

( 해당 코드로 기존 state 를 갈아 치워준다. )

changeName = state 변경함수 ( state 를 새 것으로 갈아치워줌 )

2) return 문 활용 X = 수정 편리
= state 가 array 나 object 자료인 경우,
return 문을 안쓰고도 직접 수정 가능

let user = createSlice({
  name: "user",
  initialState: { name: "kim", age: 20 },
  reducers: {
    changeName(state) {
      state.name = "park";
    },
  },
});

state.name 을 park 으로 수정해주세요 라는 코드

 

※ 문자 1개만 필요한경우에도 그냥 배열에 담아서 사용

= 수정이 편리하기 때문

---

수정함수
increase()

버튼을 누르면 위에 있는 state 중에 age 항목이 +1 되어야하는 코드 짜기

= 버튼을 누르면 스크립트를 수정하도록 하기

increase() 사용

let user = createSlice({
  name: "user",
  initialState: { name: "kim", age: 20 },
  reducers: {
    changeName(state) {
      state.name = "park";
    },
    increase(state) {
      state.age += 1;
    },
  },
});

이 함수를 동작시키면

age 항목이 +1 되도록 짬.

export 도 해주기.

export let { changeName, increase } = user.actions;

changeName 때 처럼 옆에다 해 줌.

사용하려는 곳에 import 하기

import { changeName, increase } from "./../store.js";

changeName 때 처럼 옆에다 해 줌.

dispatch 안에다가 increase 함수 갖다 쓰기

 <button
        onClick={() => {
          dispatch(increase());
        }}
      >
        버튼
      </button>

changeName 때랑 동일.

---

state 변경함수가 여러개 필요할 경우
= 파라미터문법 이용
= payload

 

가끔은 +10 하고 가끔은 +100 하고싶은 경우

= increase ()남발 하지 않고 만들기.

 

파라미터 a ( 두 번째 파라미터 ) 사용
보통 a 말고 action 으로 작명

파라미터 - 구멍

let user = createSlice({
  name: "user",
  initialState: { name: "kim", age: 20 },
  reducers: {
    changeName(state) {
      state.name = "park";
    },
    increase(state, a) {
      state.age += a;
    },
  },
});

increase(10) 을 쓰게되면

10이 a 자리로 들어가게 된다.

+ 10을 해주는 코드 완성

 increase(state, action) {
      state.age += action.payload;
    },

보통 파라미터를 작명할 때 a 말고

action 사용. 

payload 를 추가해주기
- 화물이 도착한다는 것을 표현

    increase(state, a) {
      state.age += a.payload;
    },

정확히 하려면 a 만 쓰는게 아니라

뒤에 payload 를 추가

+10 해주는 버튼 생성

      <button
        onClick={() => {
          dispatch(increase(10));
        }}
      >
        +10
      </button>

increase() 안에다가 10 넣어서

+10 버튼 생성