javascript - 即使在调度操作并接收到有效负载后，也不会调用 Reducer

问题描述

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

我究竟做错了什么？

我试图彻底调试，我意识到动作已被分派，并且有效负载将其发送给动作创建者。但是在调度操作后不会触发减速器。

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

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

减速器/减速器.js

减速器/减速器.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;

动作.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返回预测数组和响应分数。我可以看到它们在网络调用中被返回并显示了动作调用。提前感谢任何可以提供帮助的人！:)

标签： javascriptreactjsredux

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

javascript - 即使在调度操作并接收到有效负载后，也不会调用 Reducer

问题描述

解决方案

推荐阅读