React : Redux 사용하기 2탄 🔥 최신문법

Redux store에 state 보관하는법

 

셋팅하는편에 이어 이번에는 store.js에 state를 보관하는방법을 포스팅 할거다.

최신문법이라 계속 까먹기 때문에 한번 정리하면 유용하게 쓰일듯하다.

 

---

 

1. import 해오기 createSlice ( ) 함수

 

🔥 빡통식 외우기

createSlice를 사용할때는 useState과의 역할이라고 생각하면 된다.

ㅇ

createSlick 는 괄호열고 중괄호를 쓰는데 안에는  키 : 값 형식으로 사용된다.
처음 name : ' 이름" , initialState : ' 값' 을 설정해준다.
저 state하나를 slice라고 부른다.

 

2. createSlice에 name과 initialState 값을 입력했으면 등록을 해줘야한다.

그걸 하단에 configureSotre 안에 reducer에 등록을 해줄거다.

 

일단 위에 createSlice를 쓸거니까 해당값을 변수 user에 담고

하단의 reducer안에 등록해주면된다.

 작명 : user(변수) . reducer  

이렇게 공식이니 그냥외우길.

 

 

 

이렇게 등록을 다 맞췄으면 사용을 할 수가 있는데 컴포넌트가 가서 어떻게 사용할까?

useSelector을 이용해 사용할 수 있다.

해당 코드는 Cart라는 컴포넌트이다. 여기서 useSelector을 import 해준뒤

위에 사진과 같이 사용하면 된다.

useSelector ((state)=>{return state})

변수 a라는 값에 담아주면  redux store에 있던 store이 남는다.

 

 

 

 🔴중요

✅ 만약 store에 값이 2개인데  내가원하는 값만 사용하고 싶다면?

이렇게 user ,stock이라는 값이 있는데 다  불러오기는 싫다. user의 데이터만 불러오고 싶다

useSelector ((state)=>{return state.user})

이렇게 state 뒤에 . user 를 붙혀주면 해당 값만 출력할 수있다.

 

❤ 자바스크립트 문법상 위에코드는  { } 중괄호와 return을 생략해서 사용도 가능하다

 

useSelector ((state)=> state.user)