Javascript 获得'；未定义分派'；在redux组件中

我正在尝试获取存储在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);

//存储
从“redux”导入*作为redux；
从“redux thunk”导入thunk；
从“reducers”导入{userReducer，exampleReducer，NameReducer}；
导出变量configure=（initialState={}）=>{
const reducer=redux.combinereducer({
用户：userReducer，
示例：示例减速器，
名称：namesReducer
})
var store=redux.createStore（reducer、initialState、redux.compose(
redux.applyMiddleware（thunk），
window.devToolsExtension？window.devToolsExtension（）：f=>f
));
退货店；
};
//还原剂
导出变量namesReducer=（状态=[]，操作=>{
开关（动作类型）{
“获取名称”案例：
返回[
动作名称
]
违约：
返回状态；
}
}
//行动
导出变量getNames=（名称）=>{
返回{
键入：“获取名称”，
名字
}
};
导出变量startGetNames=（）=>{
console.log（“操作已启动”）
返回（发送）=>{
var nameRef=firebase.database（）.ref（）.child（'names'）；
返回nameRef.once（'value'）。然后（（快照）=>{
var data=snapshot.val（）；
_.map（数据，函数（名称）{返回finalArr.push(
{
显示：`${name.first\u name}${name.last\u name}`，
值：name.id
}
)});
调度（getNames（finalArr））；
})
}
}
//组成部分
从“下划线”导入；
从“React”导入React；
从“react dom”导入{render}；
从'react redux'导入{connect}；
从“反应响应模态”导入模态；
var actions=要求（“操作”）；
var firebase=require（'firebase/app'）；
要求（“firebase/auth”）；
需要（'firebase/数据库'）；
//组成部分
从“roomBookingForm”导入roomBookingForm；
从“PanelHeader”导入PanelHeader；
从“PanelItem”导入PanelItem；
从“表”导入表；
从“TableRow”导入TableRow；
从“TableHeaderCell”导入TableHeaderCell；
从“TextInput”导入TextInput；
从“下拉列表”导入下拉列表；
类roomBooking扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
页面标题：“约会创建”，
openForm:false
}
}
组件willmount（）{
这是临床医生的道具
}
onOpenModal=（）=>{
this.setState（{openForm:true}）；
}
modalClose=（）=>{
this.setState（{openForm:false}）；
};
render（）{
返回(
选择权
创建约会
)
}
}
const mapDispatchToProps=（调度）=>{
名称：分派（actions.startGetNames（））
}
导出默认连接（）（roomBooking）；

您的代码几乎没有问题：

• finalArr

  在使用前未定义

• 调度

  不是这样工作的。需要像调用

  store.dispatch（{ACTION}）

  一样调用它。因此，您需要导入

  存储

---

您应通过

mapDisPatchToProps

连接功能：

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

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

---

代码中有两处更正

一,。 您需要在connect调用中传递

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

---

他们使用的是

react-redux

，因此不需要直接引用商店。