Redux 사용하기

Redux란?

Redux는 props없이 state를 공유할 수 있게 도와주는 라이브러리이다.

설치하면 js파일 하나에 모든 state들을 보관 할 수 있다.
그 state들을 모든 컴포넌트가 꺼낼 수 있고
그럼 props전송을 해주지 않아도 된다.

• 설치방법

npm install @redusjs/toolkit react-redux

터미널에 입력하면 설치가 된다.

※참고로

package.json 파일안에
"react"
"react-dom"
두 항목이 18.1x 이상 이어야 사용 가능하다.

Redux 세팅

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {}
})

위 코드를 store.js를 만들고 복붙해주면 된다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store = {store}>
      <BrowserRouter>
        <App/>
      </BrowserRouter>
    </Provider>
 </React.StrictMode>
);

후에 index.js 파일을 가서

<Provider store={import 해온거}

로 <App/>을 감싸면 된다.
그럼 이제 <App>과 그 모든 자식컴포넌트들은
store.js에 있는 state들을 마음대로 꺼내쓸 수 있다.

Redux store에 state 보관하기

step 1. createSlice() 로 state만들기
step 2. configureStore() 안에 등록하기

import { configureStore, createSlice } from '@reduxjs/toolkit';

let user = createSlice({
  name : 'user',
  initialState : 'kim'
})

export default configureStore({
  reducer: {
    user : user.reducer
  }
})

설명을 하자면

1. createSlice() 상단에서 import 해오기
2. {name : 'state 이름', initialState : 'state 값'}
   넣어서 state생성
3. configureStore() 안에 state 등록하기
4. {작명: createSlice만든거.reducer} 로 등록
5. 이제 모든 컴포넌트에서 자유롭게 사용 가능

Redux store에 있는 state 가져오기

(원하는 js파일)

import { useSelector } from 'react-redux'

function Cart(){
  let a = useSelector((state) => { return state } )
  console.log(a)
  
  return(생략)
}

실제로 콘솔착에 출력되는 것을 확인해보면
{user:'kim'} 이 잘 출력될 것이다.

※ Arrow function 팁

{} 중괄호와 return은 동시에 생략 가능하다

let a = useSelector((state) => {return state})
를
let a = useSelector((state) => state.user) 
로 바꿀 수 있다.
(여기서 state.user의 user는 state 객체의 user 프로퍼티이다.)