Question

我已经使用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中的内容，以返回预测数组和响应得分。我可以看到他们正在通过网络调用返回，并且也显示了动作调用。预先感谢任何可以提供帮助的人！：）

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

希望有帮助！

即使在分派动作并接收到有效负载后，Reducer也不被调用

1 个答案: