리덕스 시작하기

1. 앱 자동생성

npm install @reduxjs/toolkit

npx create-react-app my-app --template redux

npm install redux

1. 리액트 앱 생성 후 리덕스 적용

npm install @reduxjs/toolkit react-redux

 

Redux Store 생성

리덕스 툴킷에서 configureStore API를 import

빈 리덕스 스토어를 생성하고 export

리덕스 스토어가 생성되고 개발하는 동안 스토어를 검사할 수 있도록 리덕스 devtools 확장도 자동으로 구성됨

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {
    
  },
});

리액트에 리덕스 스토어 적용

Src/index.js 에서 애플리케이션 주위에 React-Redux <Provider>를 배치해 React 컴포넌트에서 사용할 수 있도록 할 수 있음. 방금 만든 리덕스 스토어를 가져오고 <App> 주위에 <Provider>를 배치하고 저장소를 prop으로 전달

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './app/store' // 새로 추가
import { Provider } from 'react-redux' // 새로 추가

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

리덕스 상태 슬라이스 생성

-       Src/features/counter/counterSlice.js 생성.

-       createSlice import

-       slice를 생성할 때 slice를 식별할 문자열 name이 필요하며, 상태가 어떻게 업데이트 될 수 있는지를 정의한 reducer function가 하나 이상 필요

-       slice가 생성되면 생성된 리덕스 액선 생성자와 전체 리듀서 기능을 내보낼 수 있음

-       리덕스는 데이터 복사본을 만들고 복사본을 갱신하여 모든 상태 업데이트를 변경 불가능하게 작성하도록 요구함

-       그러나, 리덕스 툴킷의 createSlice와 createReducer는 Immer 내부를 사용해 올바른 변경 불가능한 업데이트가 되는 변경 럽데이트 로직을 작성할 수 있도록 함

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Store에 Slice Reducer 추가

Counter slice에서 리듀서 함수를 가져와서 처음에 생성한 store에 추가

리듀서 파라미터 안에 필드를 정의함으로써 스토어에 해당 슬라이스 리듀서 함수를 사용해 해당 상태에 대한 모든 업데이트를 처리하도록 지시

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

리액트 컴포넌트에서 리덕스 스테이트와 액션 사용

-       이제 React-Redux hooks을 이용해 리액트 컴포넌트가 리덕스 스토어와 상호작용할 수 있도록 할 수 있음

-       useSelector를 이용해 스토어에서 데이터를 읽을 수 있으며, useDispatch를 이용해 액션을 전달할 수 있음

-       <Counter> 컴포넌트가 있는 src/features/counter/Counter.js 파일을 생성하고 App.js에 가져와 렌더링함

버튼을 클릭할 때마다

-       해당 액션이 스토어에 전달됨

-       Counter slice reducer가 액션을 보고 상태를 업데이트

-       Counter 컴포넌트가 스토어의 변경된 상태를 보고 새 데이터로 자신을 재 렌더링함

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

export function Counter() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

 

실행 결과