Question

我有一个使用react / redux构建的简单应用程序。在我的“TODO”-app中，我可以添加项目并过滤它们。我只是跟着this example。但我也尝试添加一个实际删除项目的方法，但它似乎不起作用。

操作：

let nextTodoId = 0
export const addTodo = text => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  }
}

export const setVisibilityFilter = filter => {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter
  }
}

export const toggleTodo = id => {
  return {
    type: 'TOGGLE_TODO',
    id
  }
}

export const deleteTodo = id => {
  return {
    type: 'DELETE_TODO',
    id: id
  }
}

减速机：

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ];
    case 'TOGGLE_TODO':
      return state.map(todo =>
          (todo.id === action.id)
              ? {...todo, completed: !todo.completed}
              : todo
      );
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.id);
    default:
      return state
  }
}

export default todos

在我的容器中：

import React from 'react'
import {connect} from 'react-redux'
import {deleteTodo} from '../actions'

let RemoveTodo = ({dispatch}) => {
  return (
      <div>
        <a onClick={e => {
          e.preventDefault()
          // dispatch(deleteTodo())

          console.log(dispatch(deleteTodo()));
        }}>Remove TODO</a>
      </div>
  )
}

RemoveTodo = connect()(RemoveTodo)

export default RemoveTodo

组件：

import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import RemoveTodo from '../containers/RemoveTodo'

export default class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state;
  }

  render() {
    return (
        <li
            onClick={this.props.onClick}
            className="list-group-item justify-content-between border-c1 c1"
        >
          <span>{this.props.text} {this.props.completed ? <i className="fa fa-check"/> : null}</span>
          <span className="badge c1-bg badge-pill">
            <RemoveTodo />
          </span>
        </li>
    )
  }
}

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired,
  id: PropTypes.number.isRequired
}

由于某种原因，我的“dispatch（deleteTodo（））”找不到id ...当我记录它时，我只是得到一个对象：type：“DELETE_TODO”，id：undefined。为什么？我在这里错过了什么？我是redux / react的新手。提前谢谢......

编辑：

当我将id传入dispatch（deleteTodo（id））时，我收到此错误：

Answer 1

您需要将todo的id作为道具传递给RemoveTodo组件，然后将其传递给动作创建者，如

render() {
    return (
        <li
            onClick={this.props.onClick}
            className="list-group-item justify-content-between border-c1 c1"
        >
          <span>{this.props.text} {this.props.completed ? <i className="fa fa-check"/> : null}</span>
          <span className="badge c1-bg badge-pill">
            <RemoveTodo id={this.props.id} />
          </span>
        </li>
    )
  }

然后

let RemoveTodo = ({id, dispatch}) => {
  return (
      <div>
        <a onClick={e => {
          e.preventDefault()
          dispatch(deleteTodo(id))

          //console.log(dispatch(deleteTodo(id)));
        }}>Remove TODO</a>
      </div>
  )
}

Answer 2

您没有传递id参数
这：
dispatch(deleteTodo())
应改为：
dispatch(deleteTodo(3))

修改
作为评论和编辑的后续内容，您应该传递已定义的有效id值或变量。

用redux删除“TODO”

2 个答案: