btholt / complete-intro-to-react

A Complete Intro to React, as Given for Frontend Masters
https://frontendmasters.com/learn/react/
MIT License
1.06k stars 927 forks source link

Type error at handleSearchTermChange #112

Closed lowtrux closed 6 years ago

lowtrux commented 6 years ago

I can't get Redux to work while following the part of the "Redux Review" video where Brian test if Redux is actually working ( 03:22). Whenever I type something in the input box I get this error message on the console:

Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant? at dispatch (eval at ./node_modules/redux/es/createStore.js (bundle.js:4248), :164:13) at handleSearchTermChange (eval at ./js/Landing.jsx (bundle.js:757), :84:7) at Object.executeOnChange (eval at ./node_modules/react-dom/lib/LinkedValueUtils.js (bundle.js:2779), :132:34) at ReactDOMComponent._handleChange (eval at ./node_modules/react-dom/lib/ReactDOMInput.js (bundle.js:2899), :239:38) at Object.ReactErrorUtils.invokeGuardedCallback (eval at ./node_modules/react-dom/lib/ReactErrorUtils.js (bundle.js:3019), :69:16) at executeDispatch (eval at ./node_modules/react-dom/lib/EventPluginUtils.js (bundle.js:2739), :85:21) at Object.executeDispatchesInOrder (eval at ./node_modules/react-dom/lib/EventPluginUtils.js (bundle.js:2739), :108:5) at executeDispatchesAndRelease (eval at ./node_modules/react-dom/lib/EventPluginHub.js (bundle.js:2723), :45:22) at executeDispatchesAndReleaseTopLevel (eval at ./node_modules/react-dom/lib/EventPluginHub.js (bundle.js:2723), :56:10) at Array.forEach ()

As you can see "handleSearchTermChange" actually have a type on my Landing.jsx file so i don't know what's wrong:

// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import type {RouterHistory} from 'react-router-dom';
import { setSearchTerm } from './actionCreators';

class Landing extends Component {
  props: {
    searchTerm: string,
    handleSearchTermChange: Function,
    history: RouterHistory
  };
  gotoSearch = (event: SyntheticEvent) => {
    event.preventDefault();
    this.props.history.push('/search');
  };
  render() {
    return (
      <div className="landing">
        <h1> Kokis Video Store</h1>
        <form onSubmit={this.gotoSearch}>
          <input
            onChange={this.props.handleSearchTermChange}
            value={this.props.searchTerm}
            type="text"
            placeholder="Search"
          />
        </form>
        <Link to="/search">or Browse All</Link>
      </div>
    );
  }
}
const mapStateToProps = state => ({ searchTerm: state.searchTerm });
const mapsDispatchToProps = (dispatch: Function) => ({
  handleSearchTermChange(event) {
    dispatch(setSearchTerm(event.target.value));
  }
});