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

1. 리덕스 툴킷 쓰는 이유

- 스승님께서 그러셨다. 취업하려면 새로운 라이브러리 신기술 이런거 적당히 배우고 리덕스나 하라고..

- 근데 오리지날 리덕스는 문법이 매우 더럽고 리듀서/액션 패턴도 좀 거지같아서 내 프로젝트에는 그나마 나은 툴킷세트를 사용한다.

- 체계적으로 관리는 하고싶은데 문법이라도 깔끔하게 하고싶으면 리덕스 툴킷 쓰자

 

2. 설치

npm i @reduxjs/toolkit react-redux

(리액트 18.0 이상이어야 한다. 꼰대프로젝트는 못쓴다)

 

3. 세팅

index.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}> //이 Provider로 감싸줘야함 
	      <BrowserRouter>
	        <App />
	      </BrowserRouter>
	    </Provider>
	  </React.StrictMode>
	);

- Provider로 감싸주고 store라는 props를 넘겨준다

- 기존 리덕스랑 똑같다.

 

4. 생성 및 사용하기

store.js

	import { configureStore, createSlice } from '@reduxjs/toolkit'
	
	let user = createSlice({ //state 만들기
	  name : 'user', // name : `state이름`
	  initialState : 'kim' // initialState : `state 값`
	})
	
	export default configureStore({ //state 등록하기
	  reducer: {
	    user : user.reducer //작명 : createSlice만든거.reducer
	  }
	})

 

Header.jsx

import { useSelector } from "react-redux"

const Header = ()=>{

    const result = useSelector(state => state) // 이 state에 store의 모든 state들이 남는다.

    return(
        <div>
            {result.user}
        </div>
    )
}

export default Header ;

 

5. 수정함수 세팅하기

store.js

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

const user = createSlice({
    name : 'user', //state 이름
    initialState : 'kim', //state 값
    reducers : { 
      changeName(state, action){ //파라미터 하나 넣으면 그 값은 기존 state가 됨
        return 'state바꾸기 ' + state + action.payload //return 오른쪽 걸로 갈아치워줌
              //action.payload : changeName(action) 파라미터 문법으로 전달된 data
              //action.type : state변경함수 이름이 출력
      },
    }
  })

const objectExample = createSlice({
    name : 'objectExample',
    initialState : {obj : 'Victor'},
    reducers : {
        changeNameByObject(state, action){
            state.obj = '오브젝트나 배열이면 리턴없이 일케 바꾸셈' + action.payload  // 원래 함수형 업데이트로 불변성을 지켜줘야 하지만 테스트할때는 대충한다.         
        }
    }
})

//export 해줘야됨 
export const { changeName } = user.actions 
export const { changeNameByObject } = objectExample.actions
//Slice이름.actions 하면 state 변경함수가 전부 그 자리에 출력 
//그 중에 changeName을 변수에 담아 export하겠다는 뜻이다.

export default configureStore({ //state 등록하기
  reducer: {
    user : user.reducer, //작명 : createSlice만든거.reducer
    objectExample : objectExample.reducer
  }
})

 

Header.jsx

import { useDispatch, useSelector } from "react-redux"
import { changeName, changeNameByObject } from "./../store.js"
 
const Header = ()=>{
    let dispatch = useDispatch(); //store.js에 요청을 보내줌
    
    const storeReduxChangeTest = ()=>{
        dispatch(changeName('이걸루')) //이렇게 사용하면 changeName 함수 호출 가능
    }

    const storeReduxChangeTestByObject = () =>{
        dispatch(changeNameByObject('요걸루'))
    }

    const result = useSelector(state => state)
    
    return(
        <div>
            result.user : {result.user} <br/>
            result.objectExample.obj : {result.objectExample.obj} <br/>
            <button onClick={storeReduxChangeTest}>누르면 전역state 바꿀수 있음</button> <br/>
            <button onClick={storeReduxChangeTestByObject}>누르면 오브젝트형태 바꾸는거처럼 바꿈</button>
        </div>
    )
}

export default Header ;

6. 테스트하기

테스트 해보자

- 버튼을 누르면

잘 바뀌었다.

 

7. 원래는 state는 불변성을 지켜주기 위해 함수형 업데이트 해야함

- 원래는 함수형 업데이트가 좋은거임

- 구글링해서 써보자. 실제 프로젝트 로직에는 함수형 업데이트 쓸거다.