react-redux做的一个todolist,render()里面this.props.todoData为undefined, this.props.doneData却可以获取成功
这里是container
import React, { Component } from 'react';
// import '../css/main.css'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { initTodo, initDone, addTodo } from '../reducers/TodoListReducer.js'
import { TodoList } from '../components/TodoList.js';
class TodoListContianer extends Component {
static propTypes = {
todoData:PropTypes.array,
doneData:PropTypes.array
}
constructor(props) {
super(props)
this._loadTodoData = this._loadTodoData.bind(this)
this._loadDoneData = this._loadDoneData.bind(this)
}
componentWillMount() {
this._loadTodoData()
this._loadDoneData()
}
_loadTodoData() {
let todoData = localStorage.getItem('todoList')
todoData = todoData ? JSON.parse(todoData) : []
// let doneData = [{value:'12', update:true}]
// todoData = [...todoData, ...doneData]
this.props.initTodo(todoData)
}
_loadDoneData() {
let doneData = localStorage.getItem('doneList')
doneData = doneData ? JSON.parse(doneData) : []
this.props.initDone(doneData)
}
render() {
return (
<TodoList
// this.props.todoData为undefined, this.props.doneData却可以获取成功
todoData={this.props.todoData}
doneData={this.props.doneData}
/>
)
}
}
const mapStateToProps = (state) => {
return {
todoData:state.todoData,
doneData:state.doneData
}
}
const mapDispatchToProps = (dispatch) => {
return {
initTodo:(todoData) => {
dispatch(initTodo(todoData))
},
initDone:(doneData) => {
dispatch(initDone(doneData))
}
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(TodoListContianer)
再贴上reducer
const INIT_TODOlIST = 'INIT_TODOlIST'
const INIT_DONElIST = 'INIT_DONElIST'
const DELETE_TODOlIST = 'DELETE_TODOlIST'
const DELETE_DONELIST = 'DELETE_DONELIST'
const ADD_TODOLOST = 'ADD_TODOLOST'
const EDIT_TODOLIST = 'EDIT_TODOLIST'
const CHANGE_STATE = 'EDIT_TODOLIST'
export const TodoListReducer = (state, action) => {
if(!state) {
state = {
todoData:[],
doneData:[]
}
}
switch(action.type) {
case INIT_TODOlIST:
return {todoData:action.todoData}
case INIT_DONElIST:
return {doneData:action.doneData}
case DELETE_TODOlIST:
return {todoData:action.todoData}
case DELETE_DONELIST:
return {doneData:action.doneData}
case ADD_TODOLOST:
return {todoData:action.todoData}
case EDIT_TODOLIST:
return {todoData:action.todoData}
case CHANGE_STATE:
return {todoData:action.todoData}
default:
return state
}
}
export const initTodo = (todoData) => {
return {type:INIT_TODOlIST, todoData}
}
export const initDone = (doneData) => {
return {type:INIT_DONElIST, doneData}
}
export const addTodo = (todoData) => {
return {type:ADD_TODOLOST, todoData}
}