Question

我是Redux的新手，尝试将Redux连接到我的React App时遇到很多问题，每当我在输入框中键入内容时，都会出现此错误：

未捕获的错误：动作可能没有未定义的“类型”属性。你拼错了常量吗？在分派时（在./node_modules/redux/es/createStore.js（bundle.js：4248），：164：13处评估）在handleSearchTermChange处（在./js/Landing.jsx（bundle.js：757），：78：7处评估）在Object.executeOnChange（在./node_modules/react-dom/lib/LinkedValueUtils.js（bundle.js：2779），：132：34处评估）在ReactDOMComponent._handleChange（在./node_modules/react-dom/lib/ReactDOMInput.js（bundle.js：2899），：239：38处评估）在Object.ReactErrorUtils.invokeGuardedCallback（在./node_modules/react-dom/lib/ReactErrorUtils.js（bundle.js：3019），：69：16处评估）在executeDispatch处（在./node_modules/react-dom/lib/EventPluginUtils.js（bundle.js：2739），：85：21处评估）在Object.executeDispatchesInOrder（在./node_modules/react-dom/lib/EventPluginUtils.js（bundle.js：2739）,: 108：5处评估）在executeDispatchesAndRelease（在./node_modules/react-dom/lib/EventPluginHub.js（bundle.js：2723）,: 45:22处评估）在executeDispatchesAndReleaseTopLevel（在./node_modules/react-dom/lib/EventPluginHub.js（bundle.js：2723），：56：10处评估）在Array.forEach（）

这是我的Landing.jsx：

// @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>svideo</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 mapDispatchToProps = (dispatch: Function) => ({
  handleSearchTermChange(event) {
    dispatch(setSearchTerm(event.target.value));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(Landing);

这是我的store.js

import { createStore } from 'redux';
import reducers from './reducers';

const store = createStore(reducers);

export default store;

这是我的action.js文件：

/* This file will be a bunch of constants*/
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';

我的actionCreators.js

import { SEARCH_SEARCH_TERM } from './actions';

/* Takes in a "searchterm" and it returns type and payload */

export function setSearchTerm(searchTerm: string) {
  return { type: SEARCH_SEARCH_TERM, payload: searchTerm };
}

和reducer.js：

import { SET_SEARCH_TERM } from './actions';

const DEFAULT_STATE = {
  searchTerm: ''
};

const setSearchTerm = (state, action) => Object.assign({}, state, { searchTerm: action.payload });

const rootReducer = (state = DEFAULT_STATE, action: Action) => {
  switch (action.type) {
    case SET_SEARCH_TERM:
      return setSearchTerm(state, action);
    default:
      return state;
  }
};
export default rootReducer;

真的希望有人能在这里为我带来启发，因为我对整个React，Redux，Flow和Type世界还很陌生。

Answer 1

好，所以问题是，基本上，我试图导入由于错字而不存在的函数：

这是我action.js文件中的声明：

/* This file will be a bunch of constants*/
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';

并且我试图像这样导入const：

import { SEARCH_SEARCH_TERM } from './actions';

export function setSearchTerm(searchTerm: string) {
 return { type: SEARCH_SEARCH_TERM, payload: searchTerm };
}

SEARCH_SEARCH_TERM未定义，我将其更改为SET_SEARCH_TERM，现在可以使用了。感谢@markerikson对原始帖子的评论。

将Redux连接到我的React APP：操作可能没有未定义的“ type”属性

1 个答案: