[React] 리덕스(Redux)

 

 

 

---

 

 

 

◽ Redux란?

자바스크립트 상태관리 라이브러리이다. Vue에는 Vuex가 있다면 React에는 Redux가 있다.

리덕스의 본질은 node.js이다.

컴포넌트 간 state 공유가 쉬워진다.

 

 

◽ 설치하기

리덕스는 리액트에서만 사용하는 상태관리 기술이 아니므로, react-redux를 설치해야한다.

npm install @reduxjs/toolkit react-redux

 

 

◽ Redux의 3가지 원칙

1. Single source of truth

동일한 데이터는 항상 같은 곳(store)에서 가지고 온다.

 

2. State is read-only

리액트는 setState 메소드를 활용해야만 상태변경이 가능하고, 리덕스에서도 action이라는 객체를 통해서만 상태를 변경할 수 있다.

리덕스는 읽기전용으로, 상태를 업데이트 할 때 기존의 객체를 건드리지 않고 새로운 객체를 생성해주어야 한다. 리덕스에서 불변성을 유지해야하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문이다. 객체의 변화를 감지할 때 깊은 비교가 아니라 얕은 비교를 하기때문에 좋은 성능을 유지할 수 있다.

 

3. Changes are made with pure functions

변경은 순수함수로만 가능하다.

 

[순수함수의 조건]

1. Reducer 함수는 이전 상태와 액션 객체를 파라미터로 받는다.

2. 파라미터 외의 값에는 의존하면 안된다.

3. 이전 상태는 절대 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다.

4. 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 한다.

 

다른 결과를 만들어내는 경우는 액션을 만드는 과정이나 리덕스 미들웨어에서 처리하는 등, Reducer 바깥에서 처리해주어야 한다.

 

 

 

◽ 설치하기

npm install @reduxjs/toolkit react-redux

 

◽ 세팅하기

📄 index.js

<Provider>로 감싸고 store.js를 import하여 할당한다.

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

 

 

 

 

---

 

 

 

리덕스

◽ Store

상태가 관리되는 오직 하나의 공간이다. 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 필요한 상태값을 담는다. 컴포넌트에서는 상태정보가 필요할 때 스토어에 접근한다.

 

 

◽ Action

Store에 운반할 데이터로, 자바스크립트 객체 형태이다. Action을 Reducer에 전달한다.

{
    type: 'user/changeUser',
    payload: {
    	name: '토르',
        age: 10000
    }
}

 

◽ Reducer

Action을 전달받아 Store의 상태를 업데이트한다.

Action을 Reducer에 전달하기 위해서는 dispatch() 메소드를 사용한다.

'기존의 state'를 받지만 그걸 직접 변경하는게 아니라 새로운 state 객체를 작성하여 return 해야한다.

 

 

 

 

---

 

 

 

createStore의 내장 함수

 

◽ dispatch()

Action을 Reducer에게 전달하여 state를 업데이트 한다.

import { useDispatch } from 'react-redux'

function Hamburger(props: Props) {
    const dispatch = useDispatch()

    // 호출하기
    useEffect(() => {
      dispatch({ type: UserAction.RESET })
    })
    
    return {
    	//...
    }
}

 

잘 호출된다!

 

 

 

◽ subscribe()

Store를 구독한다. Store의 State에 변경이 감지되면 callback 함수를 호출한다.

 

◽ useSelector()

상태값을 가져온다.

getState()와 헷갈려서 찾아봤더니 내부적으로 store.getState().value로 작동한다고 한다.

const { value } = useSelector(state => state.value)

 

 

---

 

 

 

 

◽ 코드 스플리팅 하기

폴더를 reducer, store로 나눈다.

이렇게 나눠준다.

 

 

📄 reducer.js

// reducer/reducer.js
import { combineReducers } from 'redux'
import UserReducer from './user'

const rootReducer = combineReducers({
  UserReducer,
})

export default rootReducer

 

 

📄 store.js

// store/store.js

// createStore가 여전히 동작은하지만 deprecated 상태이다. 아래처럼 작성해주면 됨!
import { legacy_createStore as createStore } from 'redux'
import rootReducer from '../reducer/reducer'

const store = createStore(rootReducer)

export default store

 

📄 store/user.ts

import { AnyAction } from 'redux'

interface User {
  name: string
  age: number
}

const initialState: User = {
  name: 'empty',
  age: -1,
}

export enum UserAction {
  CHANGE_INFO = 'user/changeInfo',
  RESET = 'user/reset',
}

export default function userReducer(state = initialState, action: AnyAction) {
  switch (action.type) {
    case UserAction.CHANGE_INFO:
      return {
        // 불변성 유지를 위해 새로운 객체를 리턴한다.
        ...state,
        name: '빈츠',
      }
    case UserAction.RESET:
      console.log('reset')
      return {
        ...state,
      }
      break
    default:
      return state
  }
}

 

 

 

---

 

 

 

출처

Redux(리덕스)란? (상태 관리 라이브러리) - 하나몬

[React] 리덕스 총정리 및 예제

getState() - 인프런 | 질문 & 답변

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.