addTodoActions
=function(text)
{return{type:'add_todo',text:text
};}vartodoReducer
=function(state
,action)
{if(
typeofstate
==='undefined')
{return[]
;}switch(
action.
type)
{case'add_todo':returnstate.
slice(
0).
concat(
{text:action.
text,completed:false})
;break;default:returnstate
;}};varstore
=Redux.
createStore(todoReducer)
;classApp
extendsReact.
Component{constructor(props)
{super(props)
this.
state={items:store.
getState()
}this.
onChange=this.
onChange.
bind(
this)
this.
handleKeyUp=this.
handleKeyUp.
bind(
this)
this.
handleAdd=this.
handleAdd.
bind(
this)
}componentDidMount()
{varunsubscribe
=store.
subscribe(
this.
onChange)
;}onChange()
{this.
setState(
{items:store.
getState()
})
;}handleKeyUp(e)
{if(
e.
which===13)
{this.
handleAdd()
}}handleAdd()
{varinput
=this.
refs.
todovarvalue
=input.
value.
trim()
;if(value)
store.
dispatch(
addTodoActions(value))
;input.
value='';}render()
{return(
<div
><input ref
="todo"type
="text"placeholder
="输入todo项"style
={{marginRight:'10px'}}onKeyUp
={this.
handleKeyUp}/> <button onClick={this.handleAdd}>点击添加</button><ul
>{this.
state.
items.
map(
function(item)
{return<li
>{item.
text}</li>; })} </ul></div> ); } };ReactDOM.render( <App />,document.
getElementById(
'example')
)
;</script></head><body
><div
>测试
</div> <blockquote id='example'></blockquote></body></html>来源: http://www.cnblogs.com/rubylouvre/p/6954037.html