[Worksheet 220518] 상태관리 라이브러리 - Redux

상태관리 라이브러리

Redux

React에서 useState, context 등등으로 상태를 관리하던 것보다 전역적인 상태관리가 가능하게 해준다.

Flux Architecture

Redux는 flux를 구현해놓은 라이브러리.

Redux 특징

• One way data flow
  데이터가 단방향으로 흐른다.
  -> 컴포넌트가 많아지면 이슈가 발생 -> lifting up -> 복잡해지면 관리가 힘들어진다.

• immutable

• 구성 요소

  • action {type, payload}
  • reducer (state, action) => newState
    state와 action을 합쳐서 새로운 state를 만든다.
  • store
    state가 살고 있는 곳.
  • dispatch
    dispatch를 통해서만 state를 update할 수 있다.
  • selector
    store state에서 특정한 정보를 extract 하는 것이다.

Tutorial - Redux Toolkit

• 설치
  npm install @reduxjs/toolkit
npm install react-redux

Redux Toolkit?
Redux 라이브러리들(immer/saga/thunk/reselect)의 조합

Redux Dev Tool 도 있다.

    <Provider store={store}>
      <App />
    </Provider>

우리의 root인 App을 Provider로 감쌌기 때문에 dispatch로 어느 곳에나 있던 상태를 변경할 수 있다.

Redux Hook

• useSelector()

• useDispatch()

• useStore()

• useAction()

RTK Query

데이터를 fetching 하고 caching 하는 도구.

Redux-Thunk

createAsyncThunk()
action으로 API 요청 -> 결과가 store에 반영된다.