javascript - 即使在分派(dispatch) Action 并接收到有效负载后，Reducer也不被调用

我使用create-react-app和react-redux创建了一个React应用。我在单击按钮时使用mapDispatchToProps调度动作，它返回有效负载。但是，当我尝试在组件中使用mapStateToProps检索道具时，它将返回初始状态。

我究竟做错了什么？

我尝试了彻底的调试，并且我意识到动作已分派，有效负载将其发送给动作创建者。但是，在分派动作后不会触发reducer。

这可能是我如何称呼它，或者是如何设置减速器。

index.js文件：

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')
)

reducers / Reducer.js

reducers / 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;

reducers / 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中返回预测数组和resp得分。
我可以看到他们正在通过网络调用返回，并且也显示了动作调用。预先感谢任何可以提供帮助的人！ :)

最佳答案

您需要分派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));
    });
  }
}

希望有帮助！