추가) React redux-toolkit 리덕스 쉽게 쓰는 비법

리덕스툴킷을 실제 사이드프로젝트에 세팅하는 방법을 재구성해서 개념화 한 포스팅이다.

 

아래는 실제 진행하고 있는 사이드프로젝트에서 쓰고있는 redux-toolkit 세팅방법

 

https://victormeredith.tistory.com/93

[앱삼] 4. (frontend) Redux-toolkit 구조 세팅

 

1. 조건

리덕스 특유의 더러운 문법을 쉽게 바꾼 redux/toolkit은 react18 버전 이상이어야만 사용 가능하다.

 

2. 왜쓰는가? 

리덕스 공식문서에는 다음과 같은 문제를 해결하기 위해 리덕스툴킷을 만들었다고 한다.

• "저장소를 설정하는 것이 너무 복잡하다"
• "쓸만하게 되려면 너무 많은 패키지들을 더 설치해야 한다"
• "보일러플레이트 코드를 너무 많이 필요로 한다"

리덕스 특유의 개 더러운 구성과 코드를 보기 쉽고 이해하기 쉽게 바꾸었다고 보면 된다.

 

3. 설치

npm i @reduxjs/toolkit react-redux

 

4. store.js에 가서 복붙한다.

이쁘게 올리려고 이미지로 올린거니까 이거쯤은 따라서 쓰자

 

5. index.js에 가서 Provider 태그로 전체를 감싸준다.

<Provider>로 감싸주면 된다. import 잊지 말자. esm은 사랑이다.

 

6. store.js로 다시 가서 state 생성하기

initialState: {객체도 가능하다}

 

7. store.js 밑에서 생성한 state 등록하기

여러개 등록도 가능하다.

8. 다른 컴포넌트에서 사용하기

가져다 쓰는건 이렇게 쓰면된다. 걍 result.user

 

9. store.js에서 state 수정함수 만들기

reducers를 추가한다. class 만들때 메소드처럼 생겼다. changeName이라는 함수를 만들었다.

store.js 밑에 export로 내보내줘야한다.

 

10. 다른 컴포넌트에서 state수정함수 호출하기

그냥 따라 쓴거다 나도. 걍 되더라

 

11. state가 array나 object인 경우 store.js에서 

그냥 바꿔도 되더라. 하지만 불변성을 지켜주는게 원칙이다.

 

12. 다른 컴포넌트에서 파라미터 보내면 store.js 안의 reducers 안에 action.payload에 파라미터가 전달된다.

전달된거 받아서 적당히 변경하면 되겠지.

 

 

 

쉽다쉬워