Redux (리덕스) 한 번 사용해보겠다고 정리 중...

Redux (리덕스) 뭐냐 넌?

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리

1. 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리하여 효율적 관리 가능
2. 컴포넌트끼리 같은 상태를 공유해야 할 때도 Good
3. 코드 유지 보수성 UP 작업 효율 UP 개발자 도구도 지원, 미들웨어 기능 제공 비동기 작업 효율 UP (리덕스 좋다는 소리....?)

---

1.액션

1. 상태에 변화가 필요하면 (action) 발생
2. 객체 형식

 { type : '액션의 이름'}

 { type : '액션의 이름', data : { id : 1, name : '뭐냐 이건'} }

결국 객체 형태로 저장하고 불러다 쓰겠다는 거잖아?
OOP?

2.액션 생성 함수 (action creator)

1. 액션 객체를 만들어 주는 함수

  const addTodo = data => ({
      type : '액션의 이름',
      data
  }); // 화살표 함수

  function addTodo(data) {
    return {
      type : '액션의 이름',
      data
    };
  }  // 함수

3.리듀서 (reducer)

1. 변화를 일으키는 함수 (액션을 만들어서 발생시키면 리듀서가 현재 상태와 액션 객체를 참고하여 새로운 상태를 만들어 반환)

  const initialState = {
    counter : 1
  };

  function reducer(state = initialState, action) {
    switch (action.type) {
      case '액션의 이름' :
        return {
          counter : state.counter + 1
        };
      default :
        return state;
    }
  }

4.스토어 (store)

1. 한 개의 프로젝트는 단 하나의 스토어
2. 스토어에는 현재 상태(state)와 리듀서(reducer)가 들어가 있고, 내장 함수도 있다.

5.디스패치 (dispatch)

1. 스토어의 내장 함수 중 하나
2. 액션 발생시키는 것 - dispatch(action)
3. 이 함수 호출되면 스토어는 리듀서 함수를 실행 => 새로운 상태 만들어서 반환

6.구독 (subscribe)

1. 스토어의 내장 함수 중 하나
2. 이 함수에 리스너 함수를 파라미터로 넣어 호출 => 리스너 함수는 액션이 디스패치되어 상태가 업데이트될 때마다 호출 됨

 const listener = () => {
   console.log('state update 끝났다 주인 놈아.. 나 이제 쉰다.');
 }
 const unsubscribe = store.subscribe(listener);
   unsubscribe(); // 구독 비활성화할 때 함수를 호출

리덕스의 세 가지 규칙

1. 단일 스토어
   • 하나의 애플리케이션 하나의 스토어
2. 읽기 전용 상태
   • 불변성 유지 (상태를 업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 함.)
3. 리듀서는 순수한 함수
   • 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
   • 파라미터 외의 값에는 의존 X
   • 이전 상태는 그대로 유지하고, 변화를 준 새로운 상태 객체를 반환해야 함
   • 같은 파라미터로 호출된 리듀서 함수는 같은 결과 값을 반환해야 함
     • 랜덤 값 X / 네트워크요청 X ....등 => 리덕스 미들웨어로 처리하자.

References

velopert 블로그 🙏