我不确定我在哪里出错,但当我触发removeTodo动作时,没有任何反应 . 我相信这是我的错误,但我无法弄明白 . 我认为通过设置我的动作来接收todo作为其有效载荷,然后在我的调度中我将该动作提供给todo.id,它可以删除所述id . 无法弄清楚为什么这不起作用 .
TodoItem.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { removeTodo } from '../actions';
import '../../css/Todo.css';
const mapDispatchToProps = dispatch => {
return {
removeTodo: todo => dispatch(removeTodo(todo.id))
};
};
const mapStateToProps = state => {
return {todos: [...state.todos]};
};
class ConnectedTodoItem extends Component {
render() {
const {handleToggle, todoId} = this.props;
const mappedTodos = this.props.todos.map((todo, index) => (
<div className='todo-item'>
<span onClick={handleToggle} index={index} id={todoId}>
{todo.title}
</span>
<button type='submit' className='rem-btn' id={todoId} onClick={this.props.removeTodo}>X</button>
</div>
));
return (
mappedTodos
);
}
}
const TodoItem = connect(mapStateToProps, mapDispatchToProps) (ConnectedTodoItem);
export default TodoItem;
reducers.js
import { ADD_TODO } from '../constants/action-types';
import { REMOVE_TODO } from '../constants/action-types';
import uuidv1 from 'uuid';
const initialState = {
todos: []
};
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [...state.todos,
{
title: action.payload.inputValue,
id: uuidv1()
}]
}
case REMOVE_TODO:
return {
...state,
todos: [...state.todos.filter(todo => todo.id !== action.payload)]
}
default:
return state;
}
}
export default rootReducer;
actions.js
import { ADD_TODO } from '../constants/action-types';
import { REMOVE_TODO } from '../constants/action-types';
export const addTodo = (todo) => (
{
type: ADD_TODO,
payload: todo
}
);
export const removeTodo = (todo) => (
{
type: REMOVE_TODO,
payload: todo.id
}
)
2 回答
乍一看,问题就在于你正在调用的方式
removeTodo
如您所见,该函数接受
todo
参数,然后从中提取id .但是你不是在这里传递todo .
试试这个:
更新,继续威廉的思路 . 我会做以下事情,专门绕过
id
而不是整个对象 . 这样可以更容易理解您正在更新的内容 .1)调度功能
2)通话功能
3)行动
4)减速机
要添加到Andy的答案,似乎你也在调度调用中提取id,但是你已经在你定义removeTodo的actions.js中这样做了,所以除非你在todo.id中有一个嵌套的id,否则你将会想要从任何一个地方删除它 .