Redux Store state 수정하는 방법

출처 : 리덕스 흐름 이해하기

1. View에서 액션이 일어난다.

2. dispatch에서 action이 일어난다.

3. action에 의한 reducer함수가 실행되기 전에 middleware가 작동한다.

4. middleware에서 명령내린 일을 수행하고 난 뒤, reducer함수를 실행한다.

(3, 4번은 아직 몰라도 됨!)

5. reducer의 실행결과 store에 새로운 값을 저장한다.

6. store의 state에 subscribe하고 있던 UI에 변경된 값을 준다.

 

 

리덕스에서 값의 수정은 리듀서에서 일어난다.

만약 counter모듈에있는 number에 +1을 하고 싶다면 어떻게 해야할까?

1. 리듀서에게 보낼 number을 +1하라는 명령을 만든다.

2. 명령을 보낸다.

3. 리듀서에서 명령을 받아 number+1을 한다.

 

// src/App.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux'; // import 해주세요.

const App = () => {
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);
  return (
    <div>
      <button
        onClick={() => {
          dispatch({ type: 'PLUS_ONE' });
        }}
      >
        +1
      </button>
      {number}
    </div>
  );
};

export default App;

1. 리듀서에게 보낼 명령을 만든다.

   {type : 'PLUS_ONE'}

 

2. 리듀서에게 명령을 보낸다.

   onClick={()=>{dispatch({type:'PLUS_ONE'})}}

 

3. 리듀서에서 명령을 받아 number+1을 한다.

// src/modules/counter.js

const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  console.log(action);
  switch (action.type) {
    case 'PLUS_ONE':
      return { number: state.number + 1 };
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

 

 

정리

• 액션객체란, 반드시 type이라는 key를 가져야하는 객체이다. 또한 리듀서로 보낼 명령이다.
• 디스패치란, 액션객체를 리듀서로 보내는 전달자 함수이다.
• 리듀서란, 디스패치를 통해 전달받은 액션객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는 변화를 만들어내는 함수이다.
• 디스패치를 사용하기위해서는 useDispatch라는 훅을 이용해야한다.
  • 디스패치는 스토어의 내장함수 중 하나입니다.
  • 우선 디스패치는 액션을 발생 시키는 것 정도로 이해하시면 됩니다.
  • dispatch라는 함수에는 액션을 파라미터로 전달합니다. dispatch(action)이런식으로
• 액션객체 type의 value는 대문자로 작성한다 (룰임)