[TypeScript] React에서 사용하기_2편

state와 reducer 만들 때 타입 지정 

import { Provider } from 'react-redux';
import { createStore } from 'redux';

const 초기값 = { count: 0 };

function reducer(state = 초기값, action) {
  if (action.type === '증가') {
    return { count : state.count + 1 }
  } else if (action.type === '감소'){
    return { count : state.count - 1 }
  } else {
    return initialState
  }
}

const store = createStore(reducer);

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

redux를 사용할 때 초기값 부분과 reducer, store에 타입을 지정할 수 있다. 

 

import { Provider } from 'react-redux';
import { createStore } from 'redux';

interface Counter {
  count : number
}

const 초기값 :Counter  = { count: 0 };                    -- 1

function reducer(state = 초기값, action :any) {           -- 2
  if (action.type === '증가') {
    return { count : state.count + 1 }
  } else if (action.type === '감소'){
    return { count : state.count - 1 }
  } else {
    return initialState
  }
}

const store = createStore(reducer);

export type RootState = ReturnType<typeof store.getState> -- 3

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

1. initialState로 초기값을 가지고 있는데, count 하나의 속성만 사용하고 있다. 
   초기값 : const 초기값 :{ count :number } 방식으로 바로 지정해도 되지만, 가독성을 위해서 따로 뺄 수 있다. 
2. state는 이미 초기값에 타입이 지정되어 있어 추가로 지정할 필요 없고, action은 dispatch 보낼 때 object 자료형을 타입에 지정해주면 된다. 
   현재는 편의상 any를 했는데, action :{type :string, payload :number } 등으로 지정하면 된다.  
   또한 reducer의 return 타입도 지정해줄 수 있는데, 일반적으론 state, 초기값의 타입과 동일하다.
3. 해당 부분은 redux에 있던 state를 가져올 때 사용하는 타입이다. 

State 가져오기

import React from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { Dispatch } from 'redux'
import {RootState} from './index'

function App() {
  const data = useSelector( (state :RootState) => state );   // -- 1
  const dispatch :Dispatch = useDispatch();                  // -- 2

  return (
    <div className="App">
      { data.count }
      <button onClick={()=>{dispatch({type : '증가'})}}>버튼</button>
      <Profile name="kim"></Profile>
    </div>
  );
}

1. state가 어떻게 구성되어 있는지 파악해서 직접 지정해줄 수 있지만, 위에서 지정한 RootState를 불러와서
   지정할 수 있다.
   export type RootState = ReturnType<typeof store.getState>가 store의 타입을 export 하는 방법이다. 
2. useDispatch도 타입을 지정하면 좋은데, redux에서 제공하는 Dispatch를 지정해주면 된다. 

 

@reduxjs/toolkit 에서 타입 지정하기 

@reduxjs/toolkit은 redux를 깔끔하게 짤 수 있게 도와준다. 

mport { createSlice, configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

const 초기값 = { count: 0, user : 'kim' };                                 // -- 1

const counterSlice = createSlice({
  name: 'counter',
  initialState : 초기값,
  reducers: {
    increment (state){
      state.count += 1
    },
    decrement (state){
      state.count -= 1
    },
    incrementByAmount (state, action :any){                               // -- 2
      state.count += action.payload
    }
  }
})

let store = configureStore({
  reducer: {
    counter1 : counterSlice.reducer
  }
})

export type RootState = ReturnType<typeof store.getState>

export let {increment, decrement, incrementByAmount} = counterSlice.actions // -- 3

1. 초기값은 마찬가지로 interface Counter  { count :number, user :string } 같은 방식으로 지정하면 된다. 
2. action의 지정 방식은 새롭게 있는데, 
   import { PayloadAction } from '@reduxjs/toolkit' 으로 패키지를 다운받고 
   increamentByAmount (state, action :PayloadAction<number>) { } 로 PayloadAction에 <> 를 사용해서 지정한다. 

State를 가져오는 방식은 기존과 동일하게 가져오면 된다.