Redux

Redux 설치

npm install @reduxjs/toolkit react-redux

redux toolkit - 라이브러리, redux의 개선버전, 문법이 좀 더 쉬움

셋팅하기

• store.js 파일 생성 후 아래 코드 붙여넣기

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

export default configureStore({
  reducer: { }
}) 

• index.js
  store.js import 해주기
  <Provider store={store}> App.js 감싸기

//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>
); 

state 만들기

• store.js 오픈

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

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

//createSlice useState역할, state 하나를 slice라고 부름
let user = createSlice({
  name : 'user', // state 이름
  initialState : 'kim' // 값
});
//새로운 state 만들경우 createSlice 추가
let stock = createSlice({
  name : 'stock', // state 이름
  initialState : [10, 11, 12] // 값
});

export default configureStore({
  
  //createSlice에서 작성한 state를 여기에 등록해야 사용할수 있음.
  reducer: {
    user : user.reducer, // 작명 : state이름.reducer
    stock : stock.reducer
  }
}) 

Redux store의 state 사용하기

• useSelector() 훅 사용
  useSelector( (state) => { return state } ) store에 있던 모든 state 정보를 가져옴

import { useSelector } from "react-redux"

function Cart(){
  //useSelector를 변수에 저장하여 출력 (저장된 모든 state)
  let a = useSelector((state) => state )
  //저장된 state 중 user state 정보만 출력
  let a = useSelector((state) => state.user )

  return (생략)
}

store의 state 변경하는 법

1. state 수정 함수 만들기 reducers : { 함수(){ return ~내용작성~ } }
   state 수정 함수를 action이라고 함

//store.js

let ueser = createSlice({
	name: 'user',
  	initialState: 'kim',
  	//수정 함수
  	reducers : {
      reName(state){ // 여기서 state는 기존 state를 의미 > 'kim'
      	return 'john' + state
      },
      //함수를 추가로 만들경우
      change(state){
      	return
      }
    }
})

2. 수정 함수 export해주기

//store.js

let ueser = createSlice({
	name: 'user',
  	initialState: 'kim',
  	reducers : {
      reName(state){
      	return 'john' + state
      }
    }
})

//user.actions > reducers 내 변경함수가 오브젝트형식으로 남음

//actions를 변수에 저장하여 export
export let { reName } = user.actions

3. import & dispatch
   수정함수 import 해주기
   useDispatch() > store.js로 요청을 보내주는 함수, 변수에 저장하여 사용

import { reName } from './store.js';
import {useDispatch, useSelector } from 'react-redux';

function(Cart){
	let state = useSelector((state)=>state);
  	let dispatch = useDispatch()
  
    return <div>
      //dispatch( state변경함수() )
      <h1>{ dispatch( reName() )}</h1>
      </div>
    
}

state가 object/array일 경우 변경하는 법

array/object 자료의 경우 return 없이 직접 수정이 가능

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      //return 없이 직접수정 가능
      state.name = 'park'
    }
  }
})

직접 수정이 가능한 이유는 Redux설치 시 Immer.js 라이브러리가 설치되기 때문
직접 수정이 가능한 편리함때문에 state를 만들 때, 문자나 숫자 하나만 필요해도
일부러 object, array형으로 만드는 경우가 있음

• 파라미터 문법 사용

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, action){ // 두번째 파라미터 action
      state.age += action.payload // payload 붙여주기
    }
  }
}) 

action.type > state변경함수 이름 출력
action.payload > 파라미터 출력