React - useDispatch를 사용한 액션 실행

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

 

1. useDispatch 사용을 위한 react-redux 설치

npm install react-redux

yarn add react-redux

react-redux에 useDispatch라는 객체가 속해있기에 설치해준다.

 

2. useDispatch 선언

import { useDispatch } from 'react-redux';

cosnt dispatch = useDispatch(); // dispatch로 재선언하여 사용한다.

useDispatch객체를 dispatch로 재선언한 후, dispatch 변수를 활용하여 액션을 호출할 수 있다.

 

(참고하면 좋을 자료)

https://stackoverflow.com/questions/63581734/react-redux-why-use-dispatch-usedispatch

react redux why use dispatch = useDispatch()?

---

3. 리듀서 생성

// modules/fruit.js -  fruit이라는 기능을 가진 리듀서

// 액션
const SET_FRUIT_LIST = "fruit/SET_FRUIT_LIST";

// 액션 생성 함수
export const setFruitList = fruistList => ({ type : SET_FRUIT_LIST, fruitList });

// 초기값
const initialState = {
  name: false,
  price: false,
};

// 리덕스 스토어값 변경
export default function fruit(state = initialState, action) {
  switch(action.type) {
    case SET_FRUIT_LIST :
      return {
        ...state,
        name: action.fruitList,
      };
    default:
      return state;
  }
}

지난 게시글에서 액션을 정의하고 함수를 생성했던 내용을 그대로 가져왔다.

dispatch를 사용하여 액션을 호출하고 변경할 상태값 내용을 넣어 상태값을 변경할 수 있다.

 

4. dispatch로 액션 호출

dispatch( setFruitList( "딸기" ) );

실행할 액션함수명을 적은 후, 해당 액션함수의 파라미터에 변경할 상태값을 추가하고 dispatch로 감싸면 해당 액션을 호출하는 dispatch함수가 완성된다. 파라미터값에는 문자열 뿐만 아니라,  true / false, 정수, json 타입 등 다양한 타입의 내용을 넣을 수 있다.

 

export const setFruitList = fruistList => ({ type : SET_FRUIT_LIST, fruitList });

액션 함수의 fruitList에는 위에서 추가한 '딸기'라는 값이 들어가게 된다.

 

5. dispatch의 결과

// 리덕스 스토어값 변경
export default function fruit(state = initialState, action) {
  switch(action.type) {
    case SET_FRUIT_LIST :
      return {
        ...state,
        name: action.fruitList,
      };
    default:
      return state;
  }
}

또한 마지막 부분에 스토어값을 변경시키는 함수 fruit부분을 살펴보자. action.fruitList에는 위에서 추가한 '딸기'라는 값이 들어있다. 이 딸기라는 값을 name이라는 리덕스 스토어의 상태에 저장한다. 즉, 리덕스 스토어 초기값을 살펴보면 name에는 false라는 초기값이 들어가 있다. 하지만 dispatch를 통해 setFruitList라는 액션에 '딸기'라는 값을 넣고 액션을 호출하게 되면, 딸기라는 값이 name에 들어가게 된다.

 

리덕스 스토어에 변경된 결과값을 살펴보기 위해서는 리액트 개발자 도구를 설치한 후, 확인할 수 있다. 다음 포스팅에는 개발자 도구 설치하는 법에 대해 포스팅 할 예정이다.

 

-- 리덕스 스토어를 생성하는 방법 --

https://phsun102.tistory.com/83

React - Redux를 통한 상태관리

 

-- 리덕스 스토어의 상태값을 반환하는 방법 --

https://phsun102.tistory.com/85

React - useSelector를 활용한 리덕스 상태값 반환