TIL 29. Redux!!!!!!!!!!!!!!

initialState === 초기 상태값
Reducer === 변화를 일으키는 함수

• 보통 모듈은 기능의 이름을 따서 파일을 생성한다.
• 모듈의 구성요소로는 initialState, Reducer가 있다.
• 모듈을 만들면, 스토어에 연결을 해야만 한다. 그리고 연결은 configStore.js에서 한다.
• 컴포넌트에서 Store를 조회할 때는 useSelector를 사용해야 한다.
• useSelector((state)⇒state) 에서 state는 모든 모듈의 state 를 조회할 수 있는 값이다.

아래는 리듀스의 기본 동작 코드다.

// src/modules/counter.js 모듈

// 액션 value를 상수들로 만들어 줍니다. 보통 이렇게 한곳에 모여있습니다. 
const PLUS_ONE = "PLUS_ONE"; 
const MINUS_ONE = "MINUS_ONE";

 // Action Creator를 만들어 줍니다. 
export const plusOne = () => { 
	return { 
		type: PLUS_ONE, 
	}; 
};
 
export const minusOne = () => { 
	return { 
		type: MINUS_ONE, 
	};
 }; 

// 초기 상태값
 const initialState = { number: 0, }; 

// 리듀서 
const counter = (state = initialState, action) => { 
	switch (action.type) {
		case PLUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다. 
			return { 
				number: state.number + 1, 
			}; 
		case MINUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다. 
			return { 
				number: state.number - 1, 
			}; 
		default: 
			return state; 
	} 
}; 

export default counter;

결국 모듈안에는 액션의 벨류와 액션객체(생성자), 초기 값(initialState), 리듀서가 있다.
App.js에는 아래의 코드로 import해야한다.

import {useSelector, useDispatch} from "react-redux"; // import 해주세요.
import {plusOne, minusOne} from "./redux/modules/counter"; // 모듈 안의 액션 생성자.

const dispatch = useDispatch(); // dispatch 생성

const minus = () => {
    dispatch(minusOne()); 	//디스패치로 액션객체를 담아서 counter.js 모듈 안의 리듀서를 실행시키고, 
							//리듀서는 액션객체 안의 타입에 맞는 케이스를 리턴한다.
  return (
    <div>
      <div>{number}</div>

      <button
        onClick={() => {
          dispatch(plusOne());	//디스패치로 액션객체를 담아서 counter.js 모듈 안의 리듀서를 실행시키고, 
								//리듀서는 액션객체 안의 타입에 맞는 케이스를 리턴한다.
        }}
      >
        +1
      </button>

      <button onClick={minus}>-1</button> // 리턴 위에 있는 minus함수를 실행시킨다.
    </div>
  );

위 코드는 정적인 값만 다룰 수 있다.
내가 직접 initialState값을 정해줘야 한다.

사용자가 입력하는 가변값을 받아서 사용하려면 payload를 사용하면 된다.
아래는 payload를 사용한 코드다.

payload 사용

// 로직—————————

const onClickAddNumberHandler = () => {
    dispatch(addNumber(number));
  };
// dispatch로 addNumber라는 함수(액션 객체)에게 number라는 파라미터를 받아서 리듀서로 보낸다.
(물론 onChange로 input의 벨류를 useState에 담아서 number로 보낸다는 전제.)

// 모듈—————————

const ADD_NUMBER = "ADD_NUMBER";

// 액션 객체
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload: payload,
  };
};
// 액션 객체의 파라미터로 payload를 받고 payload 부분에, dispatch에 담아서 보낸 number값이 들어간다.
해당 액션객체

// Initial State
const InitialState = {
  number: 0,
};

// 리듀서
const counter = (state = InitialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };
    default:
      return state;
  }
};
// 리듀서가 액션 타입에 맞는 케이스를 리턴하는데,  리턴 값은 ‘현재 number’와 ‘스위치 조건에 맞는 타입의 action객체 속 payload값’을 더한 것이다.

그리고 Redux는 duck pattern으로 작성한다.

1. reducer 함수를 export default한다. (이렇게 하면 모듈 파일안의 작은 함수들도 임포트만으로 사용가능.)
2. action 함수들을 export 한다.
3. action의 type은 app reducer action-type의 형태로 작성.

결론 - duck pattern이란 모듈 파일 하나에 action-type, action creator, reducer가 모두 존재하는 방식.

지금까지 작성한 코드는 모두 duck pattern방식이다.