Redux 와 Redux-toolkit
" Redux " 는 상태 관리 라이브러리 중 하나로 가장 인기가 많은 녀석입니다. props 를 여기저기 내려주다가 props드롤링 이 일어나는 것을 방지하기 위해 서버와 주고 받는 데이터를 관리해주는 역할을 학도 있습니다.
> 댕쩌는 설명 블로그가 있어서 첨부합니다. : 최고 리덕스야 고맙다! Redux & Redux Toolkit 알아보기
> 내가 정리한 Redux : [230424 ~ 5] 리덕스::REDUX
Redux-toolkit 은 redux의 상위 업그레이드 버전으로 이해했습니다요... 어차피 {toy-project-DailyMusic}작업을 redux 로 상태 관리 하기로 했으니까 이왕 하는거 redux-toolkit으로 적용해서 사용해보겠습니다.
Redux 와 Redux-toolkit 설치
1. npm install
npm install redux react-redux
npm install @reduxjs/toolkit
Redux 와 Redux-toolkit 사용해보기
개쩌는디..? Redux-toolkit개 쩌는디요..?
store.js에 값 저장 하고 따로 countSlice같은 파일 만들어서 여기서는 값이 변경 되서 store로 보낼 수 있게 함.
그리고 App.을 index에서 Provider로 감싸서 store이 전역에서? 관리 될 수 있게 해줌
내가 원하는 컴포넌트에 가서 useDispatch랑 useSelector을 이용해서 새롭게 조건을 건 함수를 생성해서 얘를 이용해서 변경된 값이 countSlice로 보내져서 일종의 리듀서 : 로 보내져서 변경되서 store로 저장되서 개 쩔게 관리 할 수 있음
근데 우리는 일단 임시 json-server로 api불러와서 거기서 좋아요 수가 있으니까 얘는 reac-query로 불러와서 사용할 수 있다고 함.
이러한 비동기 작업을 처리해줄 수 있는 " 미들웨어" 인 redux-saga, redux-thunk같은 녀석들이 있음.
react-query도 어떻게 보면 미들웨어긴 한데 별도의 라이브러리이긴 해서. react-query의 자체 훅을 사용해서 api를 비동기적으로 관리할 수 있음!!!!!!!!!
코드는 정리해서 올리겠어용
__Dang_쩌는 참고들 __
'Programming > React & TypeScript' 카테고리의 다른 글
| call함수 내에서 useSelector 사용 불가 (0) | 2023.07.24 |
|---|---|
| <작성 중 - 내용 무-> React에서 무한 스크롤을 구현해봅시다. (0) | 2023.07.02 |
| [React x Typescript] Route 관련 에러...<Uncaught Error: useRoutes() may be used only in the context of a <Router> component> (0) | 2023.06.08 |
| [React x Typescript] App.tsx, Index.tsx 설정하는 방법 (0) | 2023.06.06 |
| Vite로 React 프로젝트 시작해보기 (0) | 2023.05.14 |