无法使用 connect() 将调度挂载到道具

Question

我遇到了 react-redux 动作创建问题。当我在生命周期方法 componentDidMount() 中记录道具时，我的道具是一个空对象

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchSurveys } from '../../actions/index';

export class SurveyList extends Component {
 componentDidMount() {
   console.log(this.props);
   this.props.fetchSurveys();
 }

  renderSurveys() {
    return (
   this.props.surveys.length &&
    this.props.surveys.map(survey => {
     return (
       <div className="card blue-grey darken-1" key={survey._id}>
         <div className="card-content">
           <span className="card-title">{survey.title}</span>
           <p>{survey.body}</p>
           <p className="right">
             Sent On: {new Date(survey.dateSent).toLocaleDateString()}
           </p>
          </div>
          <div className="card-action">
            <a>Yes: {survey.yes}</a>
            <a>No: {survey.no}</a>
          </div>
        </div>
      );
    })
  );
}

 render() {
  return <div>{this.renderSurveys()}</div>;
  }
}

function mapStateToProps({ surveys }) {
 return { surveys };
 }

  export default connect(mapStateToProps, { fetchSurveys })(SurveyList);

现在根据 react-redux 文档，默认 dispatch 包含在 props 中，因此我们不需要在 connect 方法中显式调用 mapDispatchToProps 来访问我们的动作创建者。 fetchSurveys() 是一个动作创建者，我希望它返回一个我然后呈现的调查列表。

然而 this.props = {};所以我当然不能在 renderSurveys() 的 undefined 上调用 .map，因为我也没有在 props 上获得调查属性。

我真的很困扰为什么我的道具是空的。任何人都可以对这个问题有所了解，我将非常感激。我尝试使用 bindActionCreators 并拥有自己的 mapDispatchToProps 方法，这也不起作用。

这是我的行动。

import axios from 'axios';
import { FETCH_USER, FETCH_SURVEYS } from './types';

export const fetchUser = () => async dispatch => {
  const res = await axios.get('/api/current_user');

 dispatch({ type: FETCH_USER, payload: res.data });
 };

export const handleToken = token => async dispatch => {
  const res = await axios.post('/api/stripe', token);
  dispatch({ type: FETCH_USER, payload: res.data });
};

export const submitSurvey = (values, history) => async dispatch => {
 const res = await axios.post('/api/surveys', values);

 history.push('/surveys');
 dispatch({ type: FETCH_USER, payload: res.data });
};

export const fetchSurveys = () => async dispatch => {
 console.log('called');
 const res = await axios.get('/api/surveys');

 dispatch({ type: FETCH_SURVEYS, payload: res.data });
};

我的调查减少器 -

import { FETCH_SURVEYS } from '../actions/types';

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_SURVEYS:
      return action.payload;
    default:
      return state;
  }
}

控制台中的道具 -

组合减速机-

import { combineReducers } from 'redux';
import authReducer from './authReducer';
import { reducer as reduxForm } from 'redux-form';
import surveysReducer from './surveysReducer';

export default combineReducers({
 auth: authReducer,
 form: reduxForm,
 surveys: surveysReducer
});

Answer 1

刚刚在链接中看到了您的代码。在 Dashboard.js 中

不应该

import { SurveyList } from './surveys/SurveyList';

成为

import SurveyList from './surveys/SurveyList';

因为连接的组件是默认导出的？

Answer 2

你在 combineReducers 中使用过你的 reducer 吗？你应该在 reducers 文件夹中有一个 index.js 文件（例如），它有这样的内容：

import {myreducer} from './myreducer';

const rootReducer = combineReducers(
    {
        myreducer: myreducer
    }
);

export default rootReducer;

你在某处有完整的代码库吗？看起来问题不在提供的代码中..

Answer 3

您似乎忘记将减速器添加到主减速器文件中。

所以，这取决于你的代码应该是：

// reducers/index.js

import { combineReducers } from 'redux';
import surveys from './surveysReducer';

const rootReducer = combineReducers({
    surveys,
});

export default rootReducer;

希望它会有所帮助。