Редуктор не вызывается даже после отправки действия и получения полезной нагрузки.

Question

Я создал приложение реакции, используя create-react-app и react-redux. Я отправляю действие, нажимая кнопку mapDispatchToProps, и оно возвращает полезную нагрузку. Но когда я пытаюсь получить реквизит, используя mapStateToProps в моем компоненте, он возвращает исходное состояние.

Что я делаю не так?

Я попытался отладить полностью и понял, что действие отправлено, и полезная нагрузка делает его создателю действия. Но редуктор не срабатывает после отправки действия.

Возможно, это то, как я это называю, или как я настроил свой редуктор.

index.js file:

import React from 'react';
import './css/index.css';
import App from './App/App';
import * as serviceWorker from './serviceWorker';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import thunk from 'redux-thunk';

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

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

редукторы / Reducer.js

редукторы / Reducer.js

import { GET_RESP } from '../modules/actions'

   function getInitialState () {
     return {
       predictions: [],
       score: null
     }
   }

   function gesResp (state, payload) {
     return {
       ...state,
       predictions: payload.predictions,
       score: payload.score
     }
   }

   export function Reducer (state, action) {
     if (!state) {
       return getInitialState();
     }
     switch(action.type) {
       case GET_RESP:
         return gesResp(state, action.payload);
         default:
           return state;
     }
   }

   export default Reducer;

редукторы / index.js

import { combineReducers } from 'redux';
   import Reducer from './Reducer'

   const rootReducer = combineReducers({
     Reducer
   });

   export default rootReducer;

action.js

import axios from 'axios';

   // actions:
   export const GET_RESP = 'GET_RESP';

   // action creators:
   export function gesResp (payload) {
     return {
       type: GET_RESP,
       payload: payload
     }
   }

   export function fetchRecommendations (description, resp) {
     let url = 'myendpointurl';
     let requestPayload = {
       description: description,
       resp: resp
     }
     return (dispatch) => {
       return axios.post(url, requestPayload)
         .then(function(res) {
           gesResp(res.data);
       })
     }
   }

файл компонента: (я только отправляю связанный код):

 handleSubmit () {
       this.props.fetchMyRecommendations(Desc, 
   this.state.htmlContent);
     }

   const mapStateToProps = state => {
     return {
       predictions: state.Reducer.predictions,
       score: state.Reducer.score
     };
   }

   const mapDispatchToProps = dispatch => {
     return {
       fetchMyRecommendations: (Desc, userScore) => 
   dispatch(fetchRecommendations(Desc, userScore))
     };
   }

   export default connect(mapStateToProps, mapDispatchToProps) 
  (HomePage);

В идеале я хочу, чтобы в mapStateToProps возвращался массив прогнозов и соответствующий результат. Я вижу, что они возвращаются при сетевом вызове и также отображают вызов действий. Заранее спасибо всем, кто может помочь! :)

Answer 1

Вам нужно отправить getReccommendations, чтобы фактически активировать редуктор для вашего асинхронного действия. Попробуйте следующее:

export function fetchRecommendations (job_description, resume) {
  let url = 'myendpointurl';
  let requestPayload = {
    job_description: job_description,
    resume: resume
  };

  return (dispatch) => {
    return axios.post(url, requestPayload)
      .then(function(res) {
        dispatch(getReccommendations(res.data));
    });
  }
}

Надеюсь, это поможет!