CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-thunk
captain_awesome
captain_awesome

Reputation: 91

Getting 'dispatch is not defined' in redux component

I am trying to get a list of names stored in firebase to save to the redux store when the component loads. This list then gets sent to a dropdown component as props which are rendered as selectable options in the dropdown. For some reason I am getting 'dispatch is not defined' and I am not sure how to fix.

This is my code:

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

Upvotes: 3

Views: 6850

Answers (3)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

You have two correction in your code.

1. You need to pass mapDispatchToProps in the connect call. 

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

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

2.To call asynchronous action method with react-redux,the right signature is : 

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

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

Upvotes: 1

yoution
yoution

Reputation: 3

you should pass mapDisPatchToProps to connect function:

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

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

Upvotes: 0

Niladri Basu
Niladri Basu

Reputation: 10624

There are few issues with your code:

  • finalArr is not defined before using it.
  • dispatch does not work like this. It needs to be called like store.dispatch({ACTION}). So, you'll need to import store.

Upvotes: 0

Related Questions