TIL : Redux

hihyeon_cho·2022년 12월 11일

TIL

목록 보기

30/101

module

: State의 그룹

모듈의 구성요소

// 1. 초기 상태값
const initialState = {
	number : 0,
};
// 2. Reducer
const counter = (state = initialState, action) => {
	switch(action.type){
      default:
        return state;
   }
};
// 3. Reducer를 export
export default counter;

initialState : 초기 상태값
State의 초기값은 {객체} 가 아닌 배열, 원시데이터 모두 가능하다. 또한 여러개의 변수를 넣을 수도 있다.
```
  const initialState = 0;
  const initialState = [0];
  const initialState = {
  	number : 0,
      name : 'Ann'
  };
```
Reducer : 변화를 일으키는 함수
useState() 를 사용할 때, number라는 값을 바꾸고 싶으면 setNumber를 사용했는데 Redux에서는 Reducer가 이 역할을 한다.
인자로 state에 initialState를 할당해줘야 한다.
모듈을 스토어에 연결하기
모듈을 스토어에 연결하려면 config(설정)폴더에 있는 configStore.js 파일에서 아래 코드를 추가하면 store와 모듈이 연결된다.
```
		const rootReducer = combineReducers({
 	counter : counter; // 이 부분을 추가! 
 });
		```
```

스토어와 모듈이 잘 연결되었는지 확인하기 ⇒ useSelector

useSelector ( = 스토어 조회하기 )
생성한 모듈을 스토어에 잘 연결했는지 확인하기 위해서는 컴포넌트에서 스토어를 직접 조회하면 된다. 이 때 쓰는 게 react-redux의 Hook인 useSelector이다.
useSelector 사용방법
```
 const number = useSelector((state) => {
     console.log(state)
     return state
 });
```
1. store에서 꺼낸 값을 할당하는 변수 선언 // const 변수명 =
2. useSelector()를 변수에 할당 // useSelector()
3. useSelector의 인자에 화살표함수 넣기 // (state) = {}
4. 화살표함수의 인자에서 값을 꺼내 return // return state

모듈의 state 수정기능 만들기

reducer에게 보낼 명령(=액션객체)을 만든다.
: redux에서는 명령을 Action이라고 한다.
이는 reducer에게 내가 어떤 Action을 하길 원한다는 표현과 같다.
이를 코드로 나타내면 객체로 만들게 되는데, 이걸 "액션 객체"라고 한다.
액션개체는 reducer에게 보냈을 때, reducer가 type이라는 key를 보기 때문에 반드시 type이라는 key를 가져야한다.
```
{ type : "액션value" }
```

액션객체를 보낸다.
(1) 액션객체를 reducer로 보내기 위해서는 useDispatch라는 Hook을 사용한다. useDispatch를 사용하려면 dispatch라는 변수를 생성한다. dispatch는 store의 내장함수 중 하나이며, 액션을 발생시킨다.
(2) dispatch를 사용할 때에는 ()안에 액션 객체 넣기

    // useDispatch import
    import { useDispatch } from "react-redux";
    const App = () => {
        const dispatch = useDispatch(); //dispatch 생성
        return (
        <div>
            <button
             onClick = {() => {
              dispatch({type : "액션value"})
              }} 
             // dispatch가 실행되고 ()안의 액션객체가 리듀서로 전달된다.
             ></button>
        </div>
        );
    };

    export default App;

reducer에서 명령을 받아 실행한다.

const counter = (state = initialState, action) => {
    // switch문으로 action type을 하나씩 검색
  switch(action.type){
    // PLUS_ONE 이라는 case를 추가. PLUS_ONE 은 액션타입.
     case "PLUS_ONE"
      // 기존 state의 number에 1을 더함.
        return state.number + 1;
   }
  default:
  	return state;
};

컴포넌트로부터 dispatch를 통해 액션 객체를 전달
action 안에 있는 type을 switch문을 통해 일치하는 case 찾기
type과 case가 일치하면, 해당코드가 실행
reducer가 새로운 state를 return하면, 그게 새로운 모듈의 state가 된다.

Action creator

: 액션객체를 만드는 함수를 만드는 것. 액션을 만드는 생성자
액션의 value는 상수로 만들어주고, 그것을 이용해서 액션객체를 반환하는 함수를 만들며, 아래와 같이 액션을 만드는 생성자를 만들게 되는데, 이게 Action creator !

const PLUS_ONE = "PLUS_ONE";
export const plusOne = () => {
	return {
     type : PLUS_ONE,
   };
};

Action Creator 사용하기

Action Creator import 하기

dispatch()안에 있던 액션객체를 Action Creator로 변경하기

<button
	onClick={
  ()=>{dispatch(ActionCreator()); }}
></button>

Action Creator 사용해야 하는 이유

오타 방지 : 액션객체의 type value를 상수로 지정했기 때문에 자동완성 가능
유지보수의 효율성증가
코드가독성 좋아짐

Payload

: 액션객체에 목적어를 담아서 같이 보내주기 위하여 사용하는 것이 Payload

{type: "ADD_NUMBER", payload: 10} //ADD_NUMBER라는 액션객체에 payload라는 key와 value를 담아 10을 더하도록 한다.

payload를 넣은 Action Creator

const ADD_NUMBER = "ADD_NUMBER";

export const addNumber = (payload) => {
	return {
    	type : ADD_NUMBER,
      	payload : 10,
    };
};

Reducer에서 사용하기

const counter = (state = initialState, action ) => {
	switch (action.type){
      case ADD_NUMBER:
        return {
        	number : state.number + action.payload,
        }
    }
};

Ducks 패턴

: 모듈파일 1개에 Action Type, Action Creator, Reducer가 모두 존재하는 Redux module 작성방법의 정석

Redux를 정리하는 시간을 가졌다. 확실히 읽으면 읽을수록 처음 공부했을 때보다 개념도 점점 이해가 되지만, Redux의 흐름도 이제 좀 알 것 같다. 아직 직접 써보면서 한 건 아니라 직접 써보면 또 어려울 것 같지만, 처음엔 다 어려운 거니까 Redux도 여러 번 써보면서 익숙해지는 시간을 가져야겠다.