24. 06. 04 TIL redux-2

그럼

 const MonthSaveFunc = (month) => {
    setSaveMonth(month);
    localStorage.setItem('month', month);
  };

  function lastMonth() {
    let last = localStorage.getItem('month');
    return last ? Number(last) : 5;
  }

이 함수는 어떻게 되었나? 어떻게 값을 받아오능겨?

 

일단 setSaveMonth가 쓰인 곳은 저기 뿐이니 MonthSaveFunc, saveMonth가 쓰인 곳으로 가보자.

 

const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const MonthBtn = () => {
  const { MonthSaveFunc } = useContext(BudgetContext);

          {months.map((month, index) => {
            return (
              <Button
                key={index}
                onClick={() => {
                  MonthSaveFunc(month);
                }}
              >
                {month}월
              </Button>
            );

이렇게 생겼음.

 

여기에 MonthSaveFunc이 쓰이고 있다. 클릭하면 요소를 보낸다.

 

그럼 수정해보자.

 

액션을 디스패치하기 위해 useDispatch를 사용할 건데,

import { useDispatch } from 'react-redux';
import { setSaveMonth } from '../features/budget/budgetSlice';

임포트를 먼저 해주고, setSaveMonth 액션도 가져와준다. (setSaveMonth 함수는 ~해주세요 라는 명령을 하는 함수니까요)

 

이제 디스패치 함수를 가져오자.

  const dispatch = useDispatch;

 

이렇게 써주고,

 

 onClick={() => {
                  MonthSaveFunc(month);
                }}
              >

이제 이 부분을 바꿔줘야지요. MonthSaveFunc 함수를 이제 안 쓰니까요.

 

간단하다.

dispatch(setSaveMonth(month));

디스패치로 이 명령을 리덕스 스토어로 보내는 것이다.

 

위 MonthSaveFunc 함수가 month를 받아 setSaveMonth를 업데이트 하는 함수 아니었던가.

그냥 저렇게 해주면 된다.

 

더 쉽게 정리.

 

만약 6이 month에 들어가 액션 객체가 만들어졌다고 치면 (ex. { type: 'budget/setSaveMonth', payload: 6 } )

dispatch 함수로 이 액션 객체를 리덕스 스토어에 보낸다.

리덕스 스토어가 액션 객체를 받으면, 슬라이스에 정의된 setSaveMonth 리듀서를 호출한다.

그럼 setSaveMonth 리듀서 함수가 실행된다.

그리고 내부 코드가 실행되면서 현재 상태의 saveMonth 값을 액션의 payload 값으로 바꿔주게 된다.