代码之家 › 专栏 › 技术社区 › Big Daddy

反应、还原和重新编译:“调度不是一个函数”

recompose react-redux redux reactjs

Big Daddy · 技术社区 · 6 年前

我有一个容器/组件(来自 Redux 例如)抱怨” 调度不是一个函数 “。在我添加之前,我已经完成了这个工作 Recompose . 我想 重组 把包装纸包起来 dispatch() 所以我需要以某种方式暴露它。也许吧 applyMiddleware 会的,但我不知道该在哪里套上?我需要做什么?

容器:

const AddTodo = (props, dispatch) => {
  let input;
  const { classes } = props;
  return (
    <div>
      <form
        id="my-form-id"
        onSubmit={e => {
          e.preventDefault();
          if (!input.value.trim()) {
            return;
          }
          dispatch(addTodo(input.value));//<<<OFFENDING LINE
          input.value = "";
        }}
      >
        <TextField
          id="agentName"
          label="Agent Name"
          placeholder="Placeholder"
          form="my-form-id"
          inputRef={el => (input = el)}
          className={classes.textField}
          margin="normal"
        />
        <Button variant="extendedFab" type="submit" className={classes.button}>
          <AddIcon className={classes.addIcon} />
          New Todo
        </Button>
      </form>
    </div>
  );
};

export default compose(
  withStyles(styles),
  connect()
)(AddTodo);

根index.js:

import React from "react";
import { render } from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import App from "./components/App";
import rootReducer from "./reducers";

const store = createStore(rootReducer);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

2 回复 | 直到 6 年前

GollyJer 6 年前

有两个基本的事情要理解。

1。作曲时 connect() Redux将调度添加为一个道具。

export default compose(
  withStyles(styles),
  connect() // <-- This adds dispatch to props.
)(AddTodo);

2。您应该访问 props 作为单个对象或 destructure branches of the props object .

这条线就是误解发生的地方。

const AddTodo = (props, dispatch) => { // <-- dispatch is not an parameter, it exists at props.dispatch

要使用现有模式修复问题,请执行此操作。

const AddTodo = (props) => {
  let input;
  const { classes, dispatch } = props;
  return (
  ...

或者,您可以直接销毁props参数。

const AddTodo = ({ classes, dispatch }) => {
  let input;
  return (
  ...

无论采用哪种方法,其余代码都将按预期工作。

Shubham Khatri 6 年前

连接通过 dispatch 作为连接组件的支撑,您应该从支撑中破坏它。

const AddTodo = ({classes, dispatch}) => {
  let input;

  return (
    <div>
      <form
        id="my-form-id"
        onSubmit={e => {
          e.preventDefault();
          if (!input.value.trim()) {
            return;
          }
          dispatch(addTodo(input.value));
          input.value = "";
        }}
      >
        <TextField
          id="agentName"
          label="Agent Name"
          placeholder="Placeholder"
          form="my-form-id"
          inputRef={el => (input = el)}
          className={classes.textField}
          margin="normal"
        />
        <Button variant="extendedFab" type="submit" className={classes.button}>
          <AddIcon className={classes.addIcon} />
          New Todo
        </Button>
      </form>
    </div>
  );
};

export default compose(
  withStyles(styles),
  connect()
)(AddTodo);