나는 react/redux로 만든 간단한 앱을 가지고 있습니다. 내 "TODO"-app에서는 항목을 추가하고 필터링 할 수 있습니다. 나는 방금 this example을 따라갔습니다. 하지만 실제로 항목을 제거하는 메서드를 추가하려고했지만 작동하지 않는 것 같습니다.redux로 "TODO"를 제거하십시오
작업 :
감속기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
}
, 내 "파견 (deleteTodo())"ID를 찾을 수없는 ... 내가 로그인 할 때, 단순히 개체 수 : 유형 : "DELETE_TODO를", ID : 정의되지 않은. 왜? 나는 여기서 무엇을 놓치고 있니? 나는 redux/반응하는 새로운 사람입니다. 미리 감사드립니다 ...
편집 :
'파견 (deleteTodo()) 'ID가 없습니다. : dispatch (deleteTodo (id)) ' –
당신은 ID를 전달하지 않습니다 .. –
@TomFenech 시도했지만, "id가 정의되지 않았습니다."라는 콘솔에 다른 오류가 나타납니다. "또는 뭔가 ... – maverick