[TIL]230122_Redux

grace·2023년 1월 22일

TIL/WIL

목록 보기

22/37

🤓 What I Learned Today

(리덕스 흐름의 예시)

컴포넌트 A는 리덕스 스토어를 구독하고 있다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정하면 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는 지 흐름을 보면…

→ 컴포넌트에서 action이라는 객체를 통해 변경된 state 를 dispatch. → redux store 내의 action 함수에서 state 를 reducer로 보낸다. → reducer에서 state를 가공하여 return 한 후에 component 가 update.

좀 더 간단하게 흐름을 보자면..

1.컴포넌트는 액션을 만들고
2.액션은 행동을 해주고
3.작업지시를 가지고 있는 리듀서(함수)가 행동지침에 따라
4.스토어를 업데이트 ! store는 return 이 무조건 있어야하여 Reducer 에서 무조건 기본 리턴이 필요

어디서든 필요하면 state를 가져다 쓸 수 있다! 어떻게? useSelector 로!

🤔 Code Snippets

useDispatch
리덕스의 액션생성함수를 실행하여 스토어에 변경된 상태값을 저장하기 위해서는 해당 리액트 훅을 사용하여 액션을 실행 시켜야 한다.

(예시)

 const dispatch = useDispatch();

  const tripleIncrease = () => {
    //type:action의 이름
    //payload: 값을 넘겨주는 함수의 매개변수와 같은 역할-안써도 된다. 선택사항!

    dispatch({ type: "TRIPLEINCREMENT", payload: { num: 3 } });
  };

이 함수를 이용해서 증가 버튼 만들기~!

   <button onClick={tripleIncrease}>3배 증가</button>

+리듀서는 이렇게 만들어야한다.

let initialState = {
  count: 0,
};

//action 매개변수로 아까 던진 액션을 받아볼 수 있음
function reducer(state = initialState, action) {
  console.log("action", action);
  switch (action.type) {
    case "TRIPLEINCREMENT":
      return { ...state, count: state.count + action.payload.num };
    default:
      return { ...state, count: state.count + 0 };
  }

useSelector
스토어의 상태값을 반환해주는 역할을 하며, 리액트의 리덕스 스토어에 관한 Hook 이다.해당 함수를 사용하여 리덕스 스토어의 상태값이 바뀐경우 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링 시킨다.

(예시)

import React from "react";
import { useSelector } from "react-redux";

const Box = () => {
  //useSelector 의 사용법: (state)=>state.모듈명 형식으로 상태값을 반환할 수 있으면 마침표로 구분하여 상태값을 가져올 수도 있다.
  let count = useSelector((state) => state.count);
  
  return (
    <>
      <div className="box">
        <h3>만약 이 Box 안에서도 카운터 값을 쓰고 싶을때는 어떻게 해야하나?</h3>
        <p>같이 3배씩 증가</p>
        <h1>{count}</h1>
      </div>
    </>
  );
};

export default Box;