在 redux 组件中获取“未定义调度”答案

【问题标题】：Getting 'dispatch is not defined' in redux component在 redux 组件中获取“未定义调度”
【发布时间】：2018-05-21 08:31:21
【问题描述】：

我正在尝试获取存储在 firebase 中的名称列表，以便在组件加载时保存到 redux 存储中。然后，此列表作为道具发送到下拉组件，这些道具在下拉列表中呈现为可选选项。出于某种原因，我收到“未定义调度”，我不确定如何解决。

这是我的代码：

  //store
  import * as redux from 'redux';
  import thunk from 'redux-thunk';
  import {userReducer, exampleReducer, namesReducer} from 'reducers';

  export var configure = (initialState = {}) => {
    const reducer = redux.combineReducers({
            user: userReducer,
            example: exampleReducer,
            names: namesReducer
        })

  var store = redux.createStore(reducer, initialState, redux.compose(
      redux.applyMiddleware(thunk),
      window.devToolsExtension ? window.devToolsExtension() : f => f
    ));

    return store;
  };


  //reducers
  export var namesReducer = (state = [], action) => {
    switch (action.type) {
      case 'GET_NAMES':
        return [
          action.names
        ]
      default:
      return state;
    }
  }

  //actions
  export var getNames = (names) => {
    return {
        type: 'GET_NAMES',
        names
    }
  };

  export var startGetNames = () => {
    console.log("action started")
    return (dispatch) => {
        var nameRef = firebase.database().ref().child('names');
        return nameRef.once('value').then((snapshot) => {
                var data = snapshot.val();
                _.map(data, function(name) {return finalArr.push(
              {
                display: `${name.first_name} ${name.last_name}`,
                value: name.id
              }
            )});
           dispatch(getNames(finalArr));
        })
      }
  }

  //component
  import _ from 'underscore';
  import React from 'react';
  import { render } from "react-dom";
  import {connect} from 'react-redux';
  import Modal from 'react-responsive-modal';
  var actions = require('actions');
  var firebase = require('firebase/app');
  require('firebase/auth');
  require('firebase/database');
  //components
  import roomBookingForm from 'roomBookingForm';

  import PanelHeader from 'PanelHeader';
  import PanelItem from 'PanelItem';
  import Table from 'Table';
  import TableRow from 'TableRow';
  import TableHeaderCell from 'TableHeaderCell';
  import TextInput from 'TextInput';
  import Dropdown from 'Dropdown';


  class roomBooking extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      pageTitle: "Appointment Creation",
      openForm: false
    }
  }

  componentWillMount() {
   this.props.clinicians
  }

   onOpenModal = () => {
    this.setState({openForm: true});
  }

   modalClose = () => {
    this.setState({ openForm: false });
  };

    render() {
      return (
        <div className="main-container">
          <div className="options-menu">
            <PanelHeader >
              Options
            </PanelHeader>
              <PanelItem onClick={this.onOpenModal} propClassLeft="left-item" propClassRight="right-item">Create Appointment</PanelItem>
          </div>
        <div>
          <Table className="display-table">
            <TableRow className="display-table-head">
              <TableHeaderCell className="name" displayText="Name" />
            </TableRow>
          </Table>
        </div>
        <roomBookingForm open={this.state.openForm} onClose={this.modalClose} options={this.props.names} />
      </div>
      )
    }
  }

  const mapDispatchToProps = (dispatch) => {
    names : dispatch(actions.startGetNames())
  }

  export default connect()(roomBooking);

【问题讨论】：

标签： javascript reactjs redux react-redux redux-thunk

【解决方案1】：

您的代码存在一些问题：

finalArr 在使用前没有定义。
dispatch 不能这样工作。它需要被称为store.dispatch({ACTION})。因此，您需要导入 store。

【讨论】：

他们使用的是react-redux，所以他们不需要直接引用商店。

【解决方案2】：

你应该通过mapDisPatchToProps来连接函数：

  const mapDispatchToProps = (dispatch) => {
    names : dispatch(actions.startGetNames())
  }

  export default connect(function(){},mapDispatchToProps)(roomBooking);

【讨论】：

【解决方案3】：

您的代码中有两个更正。

1。您需要在连接调用中传递mapDispatchToProps。

const mapDispatchToProps = (dispatch) => { 
   names : dispatch(actions.startGetNames()) 
}

export default connect(null,mapDispatchToProps)(roomBooking);

2.用react-redux调用asynchronous动作方法，正确的签名是：

export var startGetNames = () => (dispatch) => { 

        return (dispatch) => {
                 //code
            } 
        }

【讨论】：