在redux [DONE]

Question

我从今天开始使用redux，（我当时正在回流）并且有一些我不明白的事情。 好吧，我正在努力创建一个todolist来理解redux的功能。获取工作，但是当我想删除todo时，我调用一个动作，在数据库中发送删除请求并删除todo数组对象中的todo对象。

在我的函数mapStateToProps中，新状态已更改，但我的组件未刷新。

我以各种方式寻找一个小时，但我不明白你有什么想法吗？

编辑：我没有在减速机中返回我的州的副本，这就是为什么它不起作用。 重要：未直接更改减速机的状态;）

这是我的代码：

的src /组件/ index.js

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

import Todo from './todo'


class Index extends React.Component {

    componentWillMount(){
        this.props.fetchTodolist()
    }

    renderTodoList(){
        var tmp = this.props.todolist.map((todo) => {
            return (
                <Todo key={todo.Id} content={todo.Content} id={todo.Id} />
            )
        })
        return tmp
    }

    render(){
        return (
            <div>
            <ul className="list-group">
            {this.props.todolist.length > 0 ? this.renderTodoList() : 'Loading...'}
            </ul>

            </div>
        )
    }
}


function mapStateToProps(state) {
    return {
        todolist: state.todo.list,
        errors: state.todo.errors
    }
}

export default connect(mapStateToProps, { fetchTodolist: fetchTodolist})(Index)

的src /组件/ todo.js

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

class Todo extends React.Component {
    constructor(props){
        super(props)
    }

    onDeleteClick(){
        this.props.deleteTodo(this.props.id)
    }

    render() {
        return (
            <li id={this.props.id} className="list-group-item">
            <span>{this.props.content}</span>
            <button className="btn btn-default">Update</button>
            <button onClick={this.onDeleteClick.bind(this)} className="btn btn-default">Delete</button>
            </li>
        )
    }
}


export default connect(null, {deleteTodo: deleteTodo}) (Todo)

减速器/ TODO-reducer.js

import { FETCH_TODOLIST, DELETE_TODO } from '../actions/todo-actions'
import _ from 'lodash'

const INITIAL_STATE = { 
    list: [],
    errors: undefined
}

export default function(state = INITIAL_STATE, action) {

    switch (action.type) {

        case FETCH_TODOLIST:
              return Object.assign({}, state, {
                    list: action.payload.data.Todo,
                    errors: action.payload.data.ListErr
                })
        case DELETE_TODO:
            var tmp = state.list
            var index = _.findIndex(tmp, {'Id': parseInt(action.id)})
            tmp.splice(index, 1)
            return Object.assign({}, state, {
                list: tmp
            })
        default:
            return state
    }
}

谢谢你。 ：）