Redux

Redux  (React 없이도 사용할 수 있는 상태 관련 라이브러리)

Redux의 필요성

→ 자식 컴포넌트에서 다른 자식 컴포넌트로 state를 전달해줄 때, 부모 컴포넌트에 끌어올리기를 하여 사용한다. 한 두가지의 컴포넌트라면 괜찮지만, 수백개의 컴포넌트라면 상태관리는 매우 복잡해진다. 이에 Redux를 이용한면 상태관리에 용이해진다.

 

장점 ➀ 상태를 예측 가능하게 만들어준다. ➁ 유지보수 ➂ 디버깅에 유리하다(action과 state log기록 시) ➃ 테스트를 붙이기 쉽다.

Redux의 3가지 원칙 ➀ 항상 같은 곳에서 항상 동일한 데이터를 가지고 온다.  ➁ state는 읽기 전용이다. ➂ 변경은 순수함수로만 가능하다.

 

- Store : 상태가 관리되는 오직 한 공간 store 안에 필요한 state를 두고 스토어 안에 접근해서 가지고 온다.

- Action : JS 객체 store에 state를 운반하는 역할을 하며, 하나의 객체로 표현된다.

함수를 생성해 아래 객체를 리턴하여 Action을 생성한다.

{
//! type은 필수로 가지고 있어야한다.
  type: "ADD_TODO", 
  data: {
    id: 0,
    text: "블로그 작성"
  }
}

- Reducer : 이 곳을 거쳐 현재 상태와 Action을 이용해 다음 상태를 만들어 낸다.

//! 2가지의 파라미터를 가진다.
const blogReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_BLOG:
      return Object.assign({}, state, {
        blogcontent: [...state.blogcontent, action.payload]
      })
    default:
      return state;
  }
}

Reducer의 Immutability(불변성) 때문에 복사해서 사용한다.

기억하기 ! Action 객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state를 생성한다.

- Disfatch : Action을 전달하는 메소드

- useSelector() : 컴포넌트와 state를 연결하는 역할

- useDispatch() : Action 객체를 Reducer로 전달해주는 메소드

 

---

Ref.

◾️ 리덕스 공식문서 ( https://ko.redux.js.org/introduction/getting-started )