2017-09-13 21 views
0

나는 react/redux로 만든 간단한 앱을 가지고 있습니다. 내 "TODO"-app에서는 항목을 추가하고 필터링 할 수 있습니다. 나는 방금 this example을 따라갔습니다. 하지만 실제로 항목을 제거하는 메서드를 추가하려고했지만 작동하지 않는 것 같습니다.redux로 "TODO"를 제거하십시오

enter image description here

작업 :

감속기
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/반응하는 새로운 사람입니다. 미리 감사드립니다 ...

편집 :

enter image description here

+0

'파견 (deleteTodo()) 'ID가 없습니다. : dispatch (deleteTodo (id)) ' –

+0

당신은 ID를 전달하지 않습니다 .. –

+0

@TomFenech 시도했지만, "id가 ​​정의되지 않았습니다."라는 콘솔에 다른 오류가 나타납니다. "또는 뭔가 ... – maverick

답변

1

당신은 소품으로 RemoveTodo 구성 요소에 할 일의 ID를 전달하고

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> 
) 
} 
+0

많은 감사! 잘 했어! – maverick

+0

문제 없음, 도움을 주어 기쁩니다. –

0

당신은 id 전달되지 않습니다

내가 파견에 ID 전달 (deleteTodo는 (ID))이 오류를 얻을 수 매개 변수
이 :
dispatch(deleteTodo())
이 변경되어야합니다
dispatch(deleteTodo(3))

의견과 편집에 대한 후속으로 편집
, 당신은 물론 정의 된 유효한 id 값이나 변수를 전달해야한다.

+0

나는 그것을 시도했다 ... 그러나 단순히 "id"가 정의되어 있지 않다고 말한다 ... 단지 콘솔에 더 많은 에러를 기록한다. – maverick

+0

다른 오류는 무엇입니까? –

+0

제 질문을 편집했습니다. :) – maverick

관련 문제