리액트 Redux reducer 사용법

버건디·2022년 9월 13일

목록 보기

24/58

useState는 state값을 변경할 때 1) state의 초기값을 설정해주고 2) 그걸 state 변경 함수를 통해서 값을 바꿔주는 방식이었다.
Redux 에서는 어떻게 state를 변경할 수 있을까?

🔍 reducer를 이용하여 수정 함수 만들기

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
  name : 'userName',
  initialState : 'brgndy'
})

여기서 brgndy라는 state 값을 brgndy jeon 으로 바꾸고 싶다면 reducer 를 이용해서 수정 함수를 만들어 주면 된다.

❓ action 과 reducer ❓

Redux 에서는 action과 reducer라는 개념이 존재한다.

action은 앱에서 store로 운반할 데이터를 말한다. 쉽게 말해서 상태 변화를 담은 객체이다. (state 변경 함수)

이 action이 reducer 라는 함수로 전달이 되고 이 함수가 넘겨 받은 action 을 가지고 새로운 state를 만든다.

그걸 다시 store 로 넘겨줘서 화면에 보여지게 되는 것이다.

let user = createSlice({
  name : 'userName',
  initialState : 'brgndy',
  reducers : {
    changeName(state){
      return state + 'jeon';
    }
  }
})

이런식으로 reducers를 이용해서 안에 changeName 이라는 함수를 만들어주었다.

저 매개변수로 들어간 state는 기존에 있던 초기 state 값이다.

✔️ reducers 로 만든 함수 export 하기

export let {changeName} = user.actions

디스트럭쳐링 문법을 이용해서 user 안에 있는 action 들을 export 해주면 된다.
만약에 state 변경 함수가 여러개라면 { changeName, ... , ... } 이런식으로 작성해주면 된다.

✔️ 사용할 컴포넌트에서 import 해서 dispatch() 사용하기

import { useDispatch } from "react-redux";

function Cart() {
  let name = useSelector((state) => {return state.user})
  let dispatch = useDispatch();

  return (
    {name}
    
    
      <button onClick={() => {
              dispatch(changeName());
            }}> + </button>

❓ dispatch 란❓

dispatch 는 보내다라는 뜻을 가지고 있는데, dispatch 안에 사용할 action을 넣어서 이걸 reducer로 보내주는 것이다.

🔍 누르면 1씩 증가하는 버튼 만들기

🔍 state 변경 함수에 매개변수 넣기

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
  name : 'userName',
  initialState : {name : 'brgndy', age : 27},
  reducers : {
    addAge(state){
      state.age += 1;
    }
  }
})

위에 addAge() 에서 단순히 1만 증가시켜주는것이 아닌 더해주는 값이 10일 수도, 100일수도 있는 함수를 만들어본다고 가정해보자.

함수 자체를 여러개 만들어주는 방법도 있겠지만 그 방법은 너무 비효율적이다.

이럴때 매개변수로 넣어주는 것이 action이다.

🔍 payload 란?

payload 의 사전적 의미는 탑재량인데, dispatch 를 통해 함수만 보내는 것이 아니라 payload 라는 구체적인 데이터값도 reducer 로 보내는 것이다.

let user = createSlice({
  name : 'userName',
  initialState : {name : 'brgndy', age : 27},
  reducers : {
    addAge(state, action){
      state.age += action.payload;
    }
  }
})

...

<button onClick={() => {return dispatch(addAge(100))}}> + </button>