Redux

✅ Redux가 최고?

---

redux 너무 좋긴 한데..

• 복잡해서 러닝 커브가 있다.
• 초기 코드로 작성해야될게 많음. 아주 간단한 state를 관리하기 위해서도 모든 흐름을 다 작성해야함

redux말고 다른거 없나?

• Recoil, Zustand: 복잡함을 극복
• React Query: 비동기 통신과 서버 상태 동기화가 어려운 문제를 개선
• context API: react 내장 기능

✅ Redux의 특징

---

1. 단방향 데이터 흐름인 flux 아키텍쳐의 모양을 가지고있다.
2. 데이터를 엄격하게 변경하게 하기 위해서 의도적으로 복잡함을 가지고있다.
3. 2번과 같은 이유로 배우기 어렵다.

✅ Redux의 흐름

---

1. state가 필요한 component에서 dispatch를 통해 action을 보낸다.
2. action안에는 type과 payload가 들어갈 수 있는데, type은 명시되어야 하지만 payload는 선택적으로 필요에 따라 사용된다.
3. 해당 부서(reducer)에 들어온 요청(action)을 처리해주고 action에 따른 변경 값을 저장한다.
4. 해당 state를 사용하고 있는(useSelector) component들의 state가 변경된다.

🕹️ 코드로 흐름을 이해해보자

버튼 클릭 시 state값이 1씩 더해지는 기능을 redux로 만들어보자

⚫[ component 안 ]

const dispatch = useDispatch(); //dispatch

return(
	<div>
  	  <button
        onClick = {
      	  dispatch({
          	type: "PLUS_ONE", //action
          })
      	}
        >
      클릭
      </button>
   </div>
)

• { type : "PLUS_ONE" } : 컴포넌트가 요청을 보낼 action 객체
• const dispatch = useDispatch(); : useDispatch를 통해 action을 전달할 dispatch를 선언

  요약: action을 disptch로 보내는게 1단계

⚫[ store module안 reducer ]

//reducer
const counter = (state = initialState, action) => {
	switch(action.type) {
      case "PLUS_ONE":
        return(
        	number: state.number + 1; //initialState에서 정의된 값에 +1
        )
    }
}

export default counter; //reducer를 반환

• (state = initialState, action) : reducer 함수 매개변수로 들어가는 state와 action을 가지고 기능을 수행한다. state에는 initialState로 선언한 데이터 구조가 들어가 있으며, 그 값에 따라 필요한 작업을 수행하면 된다. 또한, action안에는 type이 꼭 들어있어야하고 payload는 필요시 들어가게 된다.
• switch(action.type){} : 조건문을 활용해서 어떤 type이냐에 따라 실행되는 기능이 다르게 한다.
• export default counter : type에 따라 각 기능을 수행하는 reducer를 export해줌으로 사용할 수 있게 한다.

✅ Ducks 패턴

---

이처럼 복잡한 redux를 사용할 때에는 일련의 패턴을 정하는게 개발자들 사이에서 유지보수나 코드 가독성을 높힐 수 있게 된다. 따라서 ducks 패턴을 가지고 코드를 작성하는 것이 좋다.

🦆 Ducks 패턴?

앞서 말했듯 유지보수와 가독성 측면에서 패턴화를 하기위해 Erik Rasmussn이라는 개발자가 고안한 방법으로,

하나의 파일에 action type, action creator, reducer함수를 다 넣는 방식을 의미한다.

Ducks 패턴 작성법

1. Reducer 함수를 export default한다.
2. Action creator 함수들을 export한다.
3. Action type은 app/reducer이름/ACTION_TYPE_NAME로 한다.

• action type : 위에서는 "PLUS_ONE"이라고 적었지만, ducks 패턴을 따른다면 "app/counter/PLUS_ONE" 이라고 적어야한다.

• Action creator : reducer함수에서나 컴포넌트가 이 액션 타입을 부르려고 할 때 오타가 나거나 이름을 바꾸고 싶을 때 어디서 얼마나 사용됐는지를 모를 수 있기 때문에 유지보수를 위하기도 하고, 가독성이 좋게 한다. export로 컴포넌트에서도 쉽게 이 action을 사용하게 하기 위해 사용한다.

  		const PLUS_ONE = "app/counter/PLUS_ONE"; 
  		export const plusOne = () => {
    	return{
        	type: PLUS_ONE,
        }
    }
    
    const counter = (state = initialState, action) => {
      switch(action.type) {
          case PLUS_ONE :
              return (
                  number: state.number + 1;
              )
          default:
              return state;
              break;
      }
    };
  
   export default counter;

action creator를 사용하면 위의 reducer 파일이 이렇게 바뀌게 된다.