react-redux typeScript 초간단 사용법

// store.ts
import { createStore } from 'redux'
import rootReducer from '../reducers'

const store = createStore(rootReducer)

export type RootReducerType = ReturnType<typeof rootReducer>

export default store

reducers/addAllergy.ts

interface IntialState {
  data?: string[]
}

const initialState: IntialState = {
  data: [],
}

type addAllergy = {
  type: 'addAllergy'
  payload: string[]
}

const AddAllergy = (state = initialState, action: addAllergy): IntialState => {
  switch (action.type) {
    case 'addAllergy':
      return {
        data: action.payload,
      }
    default:
      return state
  }
}
export default AddAllergy

provider를 제공해줍니다.

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

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

dispatch를 이용하여 store에 상태를 저장합니다. 버튼을 클릭하거나 할 때 사용하면 좋습니다.

const dispatch = useDispatch()
dispatch({ type: 'addAllergy', payload: localStorageAllergy })

useSelector를 이용해 store에 있는 정보를 불러옵니다.

const reduxAllergy = useSelector((state: RootReducerType) => state.AddAllergy)