[ 리액트 / React ] Redux Toolkit

 

[ 리액트 / React ] Redux Toolkit
/ 쓰는 이유 / 사용 방법 /

◇ Redux Toolkit 쓰는 이유

  - 컴포넌트간 state 공유 편이 ( props 전송 필요 X )

     -> store.js에서 state 가져와 사용

 

◇ Redux 라이브러리 설치

     ㄴ ( React 및 React-dom 버전 18.1 이상 가정 )

npm install @reduxjs/toolkit@1.8.1 react-redux

 

◇ 기본 세팅

○ src/store.js 생성

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({

    reducer: {

 

    }

})

 

○ src/main.jsx 코드 변경

import { BrowserRouter } from "react-router-dom"

import { Provider } from 'react-redux'

import store from './store.js'

 

createRoot(document.getElementById('root')).render(

    <Provider store={store}>

        <BrowserRouter>

            <App />

        </BrowserRouter>

    </Provider>

)

- App 컴포넌트 및 모든 자식 컴포넌트에서 store.js 사용 가능

- 라우터 사용 가능

 

◇ Redux Store(store.js) state 보관

 기본 문법

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

// state 하나를 slice라 칭함

let user = createSlice({

    name: 'uesr',

    initialState : 'kimdongdong'

})

export default configureStore({

reducer: {

        user : user.reducer

    }

})

아래 부분(이름과 value)은 자유롭게 변경하여 사용

'이름' 부분은 통일 추천 

  let 이름 = createSlice 
  name :  '이름',
  initialState : 'value'

  이름 : 이름.reducer

 

 state를 추가하고 싶다면?

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

// createSlice 추가

// state 하나를 slice라 칭함

let user = createSlice({

    name: 'uesr',

    initialState : 'kimdongdong'

})

let title = createSlice({

    name: 'title',

    initialState : [10, 11, 12]

})

export default configureStore({

reducer: {

        user : user.reducer,

        title : title.reducer

    }

})

  코드 참조

 

 ! 참고 !

    ㄴ 모든 state를 store에 보관하지 말고, 여러 컴포넌트에서 사용하는 state들만 보관하여 사용하자.

 

◇ 보관된 state 사용하기

○ useSelecor import

import { useSelector } from 'react-redux';

 

○ 저장된 state 모두 불러오기

let 작명 = useSelector((state)=>{ return state })

store에 있는 모든 state들 --> '작명' 변수에 저장됨

 

○ 특정 state만 불러오기

let 작명 = useSelector((state)=>{ return state.state이름 })

store에 있는 'state이름'이라는 state --> '작명' 변수에 저장됨

 

○ 코드 축약하기

let 작명 = useSelector((state)=> state.state이름)

let 작명2 = useSelector((state)=> state)

( return과 {} <- 같이 제거 )

 

○ 불러온 state 사용하기

console.log(작명.state이름)  

모든 state를 불러왔을 경우

console.log(작명)

특정 state만 불러왔을 경우

 

◇ state 변경

○ state 수정해주는 함수 만들기 ( store.js )

let user = createSlice({

        name: 'uesr',

        initialState : 'kimdongdong',

        reducers : {

            changeName(state){

            // console.log(state) // 기존 state값 출력

            return 'parkhoho'

        }

    }

})

reducers 부분에 변경 함수 추가

위 코드 -> changeName()이라는 함수를 만들었고, 실행 시 user state의 값을 'parkhoho'로 변경해줌

 

○ 만든 함수 export

export let { changeName } = user.actions

 

만약 함수가 여러개라면?

export let { changeName, 함수2, 함수3 } = user.actions

 

○ 함수 사용하기

import { useDispatch, useSelector } from 'react-redux';

useDispatch <- 추가로 import

 

let dispatch = useDispatch()

함수 변경에 필요하니 작성!

 

dispatch(changeName())

이런식으로 작성 시 변경 함수가 실행됨

 

◇ state가 array/object일 경우

만약 다음 코드와 같이 state가 array일 경우 다음과 같이 사용

let user = createSlice({

name: 'uesr',

initialState : ['kimdongdong', 'jon'],

reducers : {

            changeName(state){

            state[1] = 'park'

        }

    }

})    

 

 

만약 다음 코드와 같이 state가 object일 경우 다음과 같이 사용

let user = createSlice({

name: 'uesr',

initialState : { userName : 'kim', age : 20},

reducers : {

            changeName(state){

            state.userName = 'park'

        }

    }

})