Redux

Redux

Redux는 상태 관리를 도와주는 자바스크립트 라이브러리이다.

웹이나 프로젝트의 규모가 커지면서 관리해야 할 상태들이 많아지면서
상태 관리의 복잡도가 증가하게 되었는데 어떤 컴포넌트에서 언제 , 어떻게 ,왜 상태가 변했는지 파악해야 했고 이때 Redux가 탄생했다!!

즉 수많은 상태들을 효과적으로 관리하기위해 만들어졌다.

---

장점

• 상태를 효율적으로 관리
• 비동기 작업 효율적
• 모듈화를 통한 유지보수 용이

---

구성 요소

• Store : 데이터를 저장하기 위한 저장소

• State : 리덕스 store에 저장되어 있는 데이터

• Action : Redux state에 변화를 주기 위한 행동

• Reducer : 상태를 업데이트 해주는 역할

• Slice : 특정 상태 조각을 관리 (리듀서 + 액션 생성 함수)

• payload : 액션에 전달되는 데이터

---

폴더 및 파일로 살펴보기

[전체 구성]

└─ store
├─ reducer
├─ reducer.ts
├─ slices
├─ boardSlice.ts
├─ loggerSlice.ts
├─ modalSlice.ts

[Slice]

각 상태들의 기능들이 모여있다고 보면 된다!!
여기는 어떤 걸 업데이트 할 것인지 관리한다

[reducer]

slice들을 모아 하나로 모아 관리해준다.

import {boardsReducer} from '../slices/boardSlice';
import {loggerReducer} from '../slices/loggerSlice';
import {modalReducer} from '../slices/modalSlice';

const reducer = {
  logger: loggerReducer,
  boards: boardsReducer,
  modal: modalReducer,
};

export default reducer;

상태를 변화시키기 위해 거쳐가야 하는 곳이다.

[store]

리듀서들을 담은 store를 생성해줌

[main.tsx]

마지막으로 Redux를 Provider를 사용해서 애플리케이션에 제공해주면 된다.

import {Provider} from 'react-redux';
import store from './store';


ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>,
);

요약

1. createSlice : 각 상태별로 기능 정의
2. reducer : 여러 슬라이스를 하나로 통합하여 관리
3. store : 2번을 바탕으로 스토어 생성
4. main에 적용 : provier을 사용해 애플리케이션에 제공
5. state update : useSeletor와 useDispatch를 사용해 어떤 state를 선택해 업데이트 할 것인지 결정