为什么我的方法不起作用?反应还原

Question

我正在研究反应还原。首先，addTodo的动作看起来是这样的。

let nextTodoId = 0;
export const addTodo = (content) => ({
type: ADD_TODO,
payload: {
id: ++nextTodoId,
content
}
});

组件在这里

import React, { useState } from "react";
import { connect } from "react-redux";
import { addTodo } from "../redux/actions";
function AddTodoComponent(props) {
const [inputValue, setInput] = useState("");
console.log({ addTodo })
const handleAddTodo = () => {
console.log(inputValue)
props.addTodo(inputValue);
setInput("");
};
return (
<div>
<input onChange={(e) => setInput(e.target.value)} />
<button className="add-todo" onClick={handleAddTodo}>
Add Todo
</button>
</div>
);
}
export default connect(null, { addTodo })(AddTodoComponent);

我想使用mapStateToProps和mapDispatchToProps，但它不起作用。我想，如果我使用破坏性的对象，这将是工作。但它并没有出现在控制台上。我错了吗？

import React, { useState } from "react";
import { connect } from "react-redux";
import { addTodo } from "../redux/actions";
function AddTodo({
allId,
byId,
newTodo,
}) {
const [inputValue, setInput] = useState("");
const handleAddTodo = () => {
newTodo(inputValue);
setInput("");
};
return (
<div>
<input onChange={(e) => setInput(e.target.value)} />
<button className="add-todo" onClick={handleAddTodo}>
Add Todo
</button>
</div>
);
}
const mapStateToProps = state => {
return {
allId: state.allId,
byId: state.byId,
}
}
const mapDispatchToProps = dispatch => {
return {
newTodo: () => dispatch(addTodo()),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AddTodo);

这就是减速器的功能。

import { ADD_TODO, TOGGLE_TODO } from "../actionTypes";
const initialState = {
allIds: [],
byIds: {}
};
export default function(state = initialState, action) {
switch (action.type) {
case ADD_TODO: {
const { id, content } = action.payload;
return {
...state,
allIds: [...state.allIds, id],
byIds: {
...state.byIds,
[id]: {
content,
completed: false
}
}
};
}
case TOGGLE_TODO: {
const { id } = action.payload;
return {
...state,
byIds: {
...state.byIds,
[id]: {
...state.byIds[id],
completed: !state.byIds[id].completed
}
}
};
}
default:
return state;
}
}

Answer 1

我玩了一段时间，但我发现了你的问题！(实际上有3个问题(。

1. 您的addTodo函数是一个获取Todo(string(内容并创建操作的函数

const mapDispatchToProps = (dispatch) => {
return {
newTodo: () => dispatch(addTodo())
};
};

但是在mapDispatchToProps函数中，您不接受任何参数，而调用addTodo时不使用任何参数。所以添加了您的Todo，但content将始终为undefined。

将其更改为

newTodo: (content) => dispatch(addTodo(content))

2. 在mapStateToProps中，您有一个命名错误的属性。您需要将state.byId更改为state.byIds。

3. 为了清除input的内容，您需要由useState控制input的值。将value={inputValue}添加到输入元素。

<input value={inputValue} onChange={(e) => setInput(e.target.value)} />

这只是一个附带说明，但您可能需要考虑学习打字脚本并为项目添加注释。有一点学习曲线，但折衷的办法是，你可以很容易地发现丢失的参数和命名错误的属性。否则，他们可能真的会令人头疼。