我从今天开始使用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
}
}
谢谢你。 :)