Redux-toolkit 사용법

✅Redux-toolkit 셋팅 & 기본 사용방법 

---

1. npm 설치 

npm install @reduxjs/toolkit react-redux

2. index.js 셋팅

• Provider 을 redux에서 import 해주고 store의 값을 받아온다.
• store의 값은 state이며 최상위 부모인 App에서 해당 state를 사용할 수 있게 되는 것이다.

3. store을 만들어야 하니 src 폴터안에 redux폴더안에 store.js를 생성해준다.

4.store.js 안에서는 createSlice와 configureStore 를 reduxjs/toolkit에서 갖고온다.

• createSlice는 초기셋팅 으로 state와 비슷한 느낌이라 생각하면 된다. 
• 보통 user 로그인할때 정보를 저장해 놓았다가 사용하기도 한다고 한다.
• name 과 초기값인 initialState를 작성해주면 된다.

5. 작성만 하면 안되고 등록을 해줘야 사용이 가능하다.

• configureStore가 등록을 할때 쓰이는 함수인데. 그안에는 reducer에 중괄호를 열고 작명 : user.reducer을 적어주면 된다. 작명은 보통 createSlice에 변수명인 user을 그대로 따서 user : user .reducer로 사용한다고 한다.

6.  내가 hyein 이라는 값을 어떤 컴포넌트에서 사용하고 싶을때는 useSelector 훅을 사용하면 된다.

• useSelector 에서의 state는 createSlice 의 내용이다. 콘솔로 확인해보면 오브젝트 자료가 나오는데 
• user : ' hyein ' 이라는 자료가 나온다. 나는 값인 ' hyein'만 출력이 되게 하고 싶으므로 state의 기본 자료는 유지하되 state.user 자료만 출력해줘 라는 뜻이다.

• useSelector에서 가져온 자료를 변수 user에 담고 데이터 바인딩을  하게 되면 화면에 hyein이 출력이 되는걸 확인할 수 있다.
•  

✅state 수정 하는 방법

•  만약 hyein 이라는 이름에 성을 붙혀 kim hye in 으로 수정을 하고 싶다고 가정하자.

• reducers 을 만든 후 함수 안에 수정할 내용을 작성하면 된다.
• 함수의 매개변수 state는 내가 위에서 작성한 초기값인 ' hyein' 이 들어간다.
• 변경함수인 changeName도 export 해서 컴포넌트에 사용을 해야한다.
•  

•  함수 바깥에서 export 을 한 후 let  { 함수이름 } = state의 변수 . actions 라고 하면 된다.
• 해당 문법은  user.actions 의 자료를 변수로 빼는 문법이다.
• 다시 Cart.js 로 돌아와 해당 변경 함수를 사용해볼것 이다.

•  changeName 함수를 import 해온다.
• useDispatch라는 함수를 react-rducx에 import할 것인데 store.js에 요청을 보내주는 함수이다.
• button을 생성 후 클릭을 했을때 dispatch가 요청을 하는데 changeName() 에 대한 내용을 요청을 해준다.
• {user } 있던 hyein은 kim hyein으로 변경이 된다.

✅ 초기값이 객체인 경우 Count + 1 하는방법 ( action 과 paylod 사용해보기)

 

• 만약 initialState가 객체이고 그안에 name 과 age  가 들어가져 있다고 가정한다.
• age 값이  + 버튼을 눌렀을때 1  씩 증가하도록 구현하고 싶다.

• Cart .js 에 돌아와 플러스 버튼을 하나 만들고 dispatch를 통해 ( addcount ( ) ) 함수를 넣어준다.
• 여기서  봐야할점은 addcount (1 ) 이라는 숫자를 넣으면 1인 값을 store 보낸다는 뜻이다.
•  

• reducers의 addcount 함수를 봤을때 매개변수를 actions 라는걸 사용했다.
• 함수안에 내용을 보면 state.age (20) + actions.payload은 내가 보내온 (1 ) 이 들어가는 것이다.
• 즉 매개변수로 1을 받아 사용할때는 actions.payload로  해서 사용이 된다.
• 그럼 버튼을 누를때 마다 해당 함수가 실행이 되고 초기값인 20은 1씩 증가하게 된다.