React - Redux 사용하기

Redux를 사용하면 컴포넌트들이 props 없이 state 공유가 가능합니다.

Store에 State 보관하기

1. store.js 파일 생성합니다. state를 담는 공간을 보통 store라고 많이 합니다. sotre.js파일에 셋팅 코드를 작성해줍니다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

2. index.js 파일에 import해주고, <provider> 태그를 넣어주어야합니다.

import store from './store.js'

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

3. createSlice로 state를 생성해줍니다.
   createSlice는 useState와 비슷한 역할을 합니다.

• createSlice() Import
• createSlice() 로 state 생성
• configureStore()안에 state 등록

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

let user = createSlice({
  name : 'user', // state 이름
  initialState : 'kim' // state 값
})

export default configureStore({ // state 등록
  reducer: { 
    user : user.reducer // 이 형태로 등록해주어야 합니다.
   }
}) 

Store의 State 꺼내기

1. useSelector()로 Redux store를 가져올 수 있습니다.

• import

import { useSelector } from "react-redux"

• 기본 문법

useSelector((state) => {return state}) // useSelector 기본 문법

2. 변수에 담아 데이터 사용하기

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

useSelector 편하게 사용하기

1. useSelector에서 원하는 state를 정할 수 있습니다.

useSelector((state) => state.user)

state 변경하는 법

state 수정해주는 함수 만들고, export 하기

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : { 							//  reducers에 함수 생성
    changeName (state) {				// changeName 이라는 함수
      return 'john kim' + state
    }
  }
})

export let { changeName } = user.actions // export

원할 때 그 함수 실행해 달라고 store.js 에 요청하기

• state 수정하기위해 생성한 함수 import
  import { changeName } from "./../store.js"

• useDispatch() import (useDispatch()는 store.js로 요청보내주는 함수입니다.)
  import { useDispatch } from "react-redux"

• useDispatch() 함수를 변수에 할당
  let dispatch = useDispatch()

• changeName()을 감싸서 dispatch 작성
  didpatch(changeName())

state 변경하는 법 (object나 array일 경우)

• 객체의 요소를 지정하여 직접 수정해도 됩니다. (immer.js의 도움을 받기 때문)

let user = createSlice({
  name : 'user',
  initialState : { name : 'kim', age : 20 },
  reducers : { 							
    changeName (state) {				
      state.name = 'park'				// 직접 지정하여 수정
    }
  }
})

export let { changeName } = user.actions // export

• 비슷한 함수 사용하기 (payload를 작성하여 파라미터를 받게합니다.)

let user = createSlice({
  name : 'user',
  initialState : { name : 'kim', age : 20 },
  reducers : { 							
    changeName (state) {				
      state.name = 'park'				
    },
    
    increase(state, action){		// action으로 보통 작성한다.
      state.age += action.payload	// payload 반드시 작성
    },
  }
})

export let { changeName, increase } = user.actions // export