[React-Redux] typescript로 세팅하는 법

개요

React로 컴포넌트를 분리해서 사용하게 되면서 상태 관리의 필요성을 느꼈습니다.

React-Redux

중앙 상태 관리 라이브러리이다.

React-Redux-Tookit?

state와 reducer를 파일 단위로 분리하고, 이름을 줘서, store에서 사용할 state와 reducer를 기능별 또는 정의별로 분리해서 관리할 수 있게 해준다. 

자동으로 store에 분리된 store들을 하나로 세팅해 준다.

 

튜토리얼

1. redux tookit와 react redux 설치

npm i @reduxjs/toolkit react-redux

 

2. Redux Store 만들기

configureStore를 사용해서 Redux store를 만듭니다.

configureStore는 reducer 함수를 받습니다.

configureStore는 자동으로 store 세팅을 해줍니다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {},
})

 

src/app/store.js에 Redux Tookit으로 configureStore API를 임포트합니다. 그리고 반환합니다.

<App />에 React Redux <Provider> 컴포넌트를 넣으면 됩니다.

<Provider store={store}> 형태로 Redux store를 전달하면 됩니다.

 

3. React Store를 React에 제공하기

React Redux <Provider>를 React Component에 넣으면 app에서 store를 사용할 수 있게 됩니다.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

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

 

4. createSlice로 Redux 'slice' reducer를 만든다.

Redux slice는 Vue의 Vuex store의 modules과 같다. slice를 사용해서 state value와 상태 변경을 정의할 reducer를 정의할 수 있다.

 

slice reducer 만들기

// features/counter/counterSlice.js
import { createSlice } from '@reduxjs/tookit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      // Redux Tookit은 'mutating'로직을 reducer에서 사용할 수 있다.
      // immer library를 사용하기 때문에 실제로 state를 mutate하고 있지 않다.
      // 즉, '초기상태'(draft state)의 변화를 감지하고, 완전히 새로운 불변 상태(brand new immutable state)를 생성합니다. 
      state.value += 1
    },
    decrementL (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.
export counterSLicer.reducer

 

store에 slice reducer 추가하기

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

export default configureSotre({
  reducer: {
    counter: counterReducer,
  }
})

 

5. React Hooks인 React Redux useSelector/useDispatch를 사용한다.

- useSelector hook을 사용해서 store로부터 데이터를 읽으면 된다.

- useDispatch hook을 사용해서 dispatch를 사용하면 된다. 필요한 만큼 dispatch actions를 사용하면 된다.

 

 

store와 components를 connect하는 방법

react-redux에 connect API를 export함.

src/routes/Home.tsx
import { connect } from 'react-redux';
interface RootState {
  state: {text:string, id:string}
}
// ...
fuction getCurrentState(state: RootState['state']) {
  return {state}
}
export default connect(getCurrentState)(Home);