[React] 17. Redux

Redux 장점

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

js 파일 하나에 state를 보관하고, 모든 component에서 직접 꺼내 사용한다.

 

Redux 설치

npm install @reduxjs/toolkit@1.8.1 react-redux

 

Redux 세팅

//store.js
import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

//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}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

 

Redux에 state 보관하기

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

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

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

 

Redux store에 있던 state 가져오기

//cart.js

import { useSelector } from "react-redux"

function Cart(){
  //let state = useSelector((state) => { return state } )
  let state = useSelector((state) =>  state.user);
  console.log(state)

  return (생략)
}

 

store의 state 변경

state 수정하는 함수를 store.js에 만들어두고, 이 함수를 component에서 원할 때 실행

 

state 변경 함수

//store.js
let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john ' + state
    }
  }
  
})
export let { changeName } = user.actions

 

state 변경 함수 사용

//cart.js
import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"

function Cart() {
	let dispatch = useDispatch()
	<button onClick={()=>{
  		dispatch(changeName())
	}}>버튼</button> 
}

 

redux state가 array/object인 경우 변경

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      return {name : 'park', age : 20}
    }
  }
}) 

또는

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    }
  }
})

 

state 변경함수가 여러개 필요한 경우

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, a){
      state.age += a.payload
    }
  }
})