我有一个容器/组件(来自 Redux
示例)提示“调度不是函数”。在添加 Recompose
之前,我已经完成了这项工作。我认为 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")
);
最佳答案
有两个基本的事情需要理解。
1.
在编写 connect()
Redux 时,将 dispatch 作为 Prop 添加。
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 (
...
无论采用哪种方法,其余代码都将按预期工作。
关于reactjs - react 、Redux 和重构 : "dispatch is not a function",我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51657081/