redux-thunk는 리덕스에 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어,

이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있음 (액션 생성자가 액션을 리턴하지 않고, 함수를 리턴함, 그리고 해당 함수가 비동기처리를 한다)

import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './redux/reducer';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

const store = createStoreWithMiddleware(
  rootReudcer,
  window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION_(),
);

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

간단히 설명하면, redux-thunk 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해줌 ,

리덕스에서는 기본적으로 액션 객체를 디스패치함

ex)

const action1 = (payload) => {
  return {
    type : 'ACTION_TYPE',
    payload
  }
}

만약에 특정 액션이 몇초 뒤에 실행되게하거나, 현재 상태에 따라 아에 액션이 무시되게 하려면, 일반 액션 생성자로는 할 수가 없음, 하지만 redux-thunk는 이를 가능하게함

Error

Uncaught Error: Actions must be plain objects instead the actual type was function

redux-thunk를 쓰지 않고 일반 액션함수를 쓰지 않으면 이러한 에러가 발생한다.

Notification 기능

ex) Action

1.5초 뒤에 액션이 디스패치되게 하는 코드로 사용자가 사이트에서 특정 버튼을 누르면 화면에 알림이 뜨고 1.5초 뒤에 그 알림이 사라지는 기능을 만들고 싶었다.