[#. React] redux payload가 Promise {<pending>} 반환할 때 문제 해결, PromiseResult 가져오기

 

 

 

 

 

 

 

DRF(Django Rest Framework) + React 프로젝트에서 

React에서 API에 post로 데이터를 넣으려고 한다 

 

 

 

 

구조는 이런 상태이다

 

 

 

 

 

 

 

① frontend/src/_actions/user_actions.js

rest api로 Test 모델에 임의의 데이터 items를 넣으려고 한다

데이터는 잘 들어간다

 

 

 

 

"aa": 4가 내가 임의로 넣은 값이다

 

 

 

 

 

② frontend/src/_reducers/user_reducer.js

 

 

 

근데 문제는 

reducer에서 actions.payload를 console에 찍어보면 아래와 같이 뜬다는 것이다

 

 

PromiseResult에 있는 object를 가져오고 싶어도 불가능하다

온갖 방법을 다 찾아봤지만 일단 문제가 발생하는 이유는

promise 형식을 payload가 받아오지 못 하는 것이다

 

 

 

미들웨어 설치를 통해 문제를 해결했다

 

해결 방법

npm install --save redux-promise

 

redux-promise는 미들웨어로 actions과 reducer 사이에 존재하며, 특정 액션을 행하고 리듀서가 처리하기 전에 작업을 처리한다

 

 

redux-thunk:
dispatch에게 함수 형식을 대처하도록 함
전달받은 액션이 함수 형태일 때, 그 함수에 dispatch와 getState를 넣어서 실행해 준다


redux-promise:
dispatch에게 프로미스 형식을 대처하도록 함
프로미스가 payload로 전달되면 요청이 시작, 성공, 실패할 때 액션의 뒷부분에 _PENDING, _FULFILLED, _REJECTED를 반환한다

 

 

 

 

frontend/src/index.js

 

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import Reducer from './_reducers';
import promiseMiddleware from 'redux-promise';	// 추가

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware)(createStore);	// 수정

ReactDOM.render(
  <Provider
    store={createStoreWithMiddleware(
        Reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
    )}
  >
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();

 

 

 

 

 

 

기존에 설치했던 redux 관련 packages

 

npm install --save redux
npm install --save react-redux
npm install --save redux-actions

 

추가로 redux-thunk도 설치해 주자