在 redux 组件中获取'dispatch is not defined'

Question

我正在尝试获取存储在firebase中的名称列表，以保存到组件加载时将其保存到Redux Store中。然后，此列表被发送到下拉组件，作为Props，在下拉列表中被呈现为可选选项。由于某种原因，我得到的"调度未定义"，我不确定如何解决。

这是我的代码：

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

Answer 1

您的代码中有两个更正。

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

Answer 2

您的代码很少：

• finalArr在使用之前未定义。
• dispatch不能这样工作。需要像store.dispatch({ACTION})一样称呼它。因此，您需要导入store。

Answer 3

您应该通过mapDisPatchToProps连接函数：

  const mapDispatchToProps = (dispatch) => {
    names : dispatch(actions.startGetNames())
  }
  export default connect(function(){},mapDispatchToProps)(roomBooking);