React redux-thunk 활용 및 연결방법

redux-thunk는 기존 redux의 createStore에 applyMiddleware를 추가하여  action함수에서 dispatch를 하게 해 준다 

그 결과 밑에 로직처럼 axios를 사용하여 결과 값을 dispatch 한다

 

 

export const fetchPosts = () => async dispatch => {

  const response = await jsonPlaceholder.get('/posts');

 

  dispatch({ type: 'FETCH_POSTS', payload: response.data });

};

 

export const fetchUser = id => async dispatch => {

  const response = await jsonPlaceholder.get(`/users/${id}`);

 

  dispatch({ type: 'FETCH_USER', payload: response.data });

};

 

 

 

Provider의 property 값에 applyMiddleware 추가하여 선언한다

 

 

import { Provider } from 'react-redux';

import { createStore, applyMiddleware } from 'redux';

 

import thunk from 'redux-thunk';

 

import App from './components/App';

import reducers from './reducers';

 

const store = createStore(reducers, applyMiddleware(thunk));

 

ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.querySelector('#root')

);

 

그 이외 연결 및 사용방법은 기존 redux활용과 같다

 

밑의 url을 참고하자

https://tantangerine.tistory.com/3

react-redux 연결하기, reducer 활용하기