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

Question

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

我做错了什么？

我尝试彻底调试，我意识到该操作已分派(dispatch)并且有效负载已到达操作创建者。但是在分派(dispatch)操作后不会触发 reducer 。

这可能是我如何调用它或者我如何设置我的 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

reducer /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 分数。 我可以看到它们在网络调用中返回，并显示了操作调用。预先感谢任何可以提供帮助的人! :)

Answer 1

您需要分派(dispatch) getReccommendations 才能实际触发异步操作的 reducer 。请尝试以下操作:

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));
    });
  }
}

希望有帮助!