前端之家收集整理的这篇文章主要介绍了
react-redux 的 todomvc，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
下文有项目文件下载
在项目目录中执行 npm install 安装依赖，install start 启动项目，网页会自动打开
index.js
importReactfrom'react'import{render}from'react-dom'import{createStore}from'redux'import{Provider}from'react-redux'importAppfrom'./containers/App'importtodoAppfrom'./reducers'letstore=createStore(todoApp)letrootElement=document.getElementById('root')render(
<Providerstore={store}>
<App/>
</Provider>,rootElement)
Action 创建函数和常量
actions/*
*action类型
*/exportconstADD_TODO='ADD_TODO';exportconstCOMPLETE_TODO='COMPLETE_TODO';exportconstSET_VISIBILITY_FILTER='SET_VISIBILITY_FILTER'/*
*其它的常量
*/exportconstVisibilityFilters={
SHOW_ALL:'SHOW_ALL',SHOW_COMPLETED:'SHOW_COMPLETED',SHOW_ACTIVE:'SHOW_ACTIVE'};/*
*action创建函数
*/exportfunctionaddTodo(text){
return{type:ADD_TODO,text}}exportfunctioncompleteTodo(index){
return{type:COMPLETE_TODO,index}}exportfunctionsetVisibilityFilter(filter){
return{type:SET_VISIBILITY_FILTER,filter}}
Reducers
reducersimport{combineReducers}from'redux'import{ADD_TODO,COMPLETE_TODO,SET_VISIBILITY_FILTER,VisibilityFilters}from'./actions'const{SHOW_ALL}=VisibilityFiltersfunctionvisibilityFilter(state=SHOW_ALL,action){
switch(action.type){
caseSET_VISIBILITY_FILTER:
returnaction.filterdefault:
returnstate}}functiontodos(state=[],action){
switch(action.type){
caseADD_TODO:
return[
...state,{
text:action.text,completed:false
}
]
caseCOMPLETE_TODO:
return[
...state.slice(0,action.index),Object.assign({},state[action.index],{
completed:true
}),...state.slice(action.index+1)
]
default:
returnstate}}consttodoApp=combineReducers({
visibilityFilter,todos})exportdefaulttodoApp
容器组件
containers/AppimportReact,{Component,PropTypes}from'react'import{connect}from'react-redux'import{addTodo,completeTodo,setVisibilityFilter,VisibilityFilters}from'../actions'importAddTodofrom'../components/AddTodo'importTodoListfrom'../components/TodoList'importFooterfrom'../components/Footer'classAppextendsComponent{
render(){
//Injectedbyconnect()call:
const{dispatch,visibleTodos,visibilityFilter}=this.propsreturn(
<div>
<AddTodo
onAddClick={text=>
dispatch(addTodo(text))
}/>
<TodoList
todos={visibleTodos}
onTodoClick={index=>
dispatch(completeTodo(index))
}/>
<Footer
filter={visibilityFilter}
onFilterChange={nextFilter=>
dispatch(setVisibilityFilter(nextFilter))
}/>
</div>
)
}}App.propTypes={
visibleTodos:PropTypes.arrayOf(PropTypes.shape({
text:PropTypes.string.isrequired,completed:PropTypes.bool.isrequired}).isrequired).isrequired,visibilityFilter:PropTypes.oneOf([
'SHOW_ALL','SHOW_COMPLETED','SHOW_ACTIVE'
]).isrequired}functionselectTodos(todos,filter){
switch(filter){
caseVisibilityFilters.SHOW_ALL:
returntodoscaseVisibilityFilters.SHOW_COMPLETED:
returntodos.filter(todo=>todo.completed)
caseVisibilityFilters.SHOW_ACTIVE:
returntodos.filter(todo=>!todo.completed)
}}//Whichpropsdowewanttoinject,giventheglobalstate?//Note:usehttps://github.com/faassen/reselectforbetterperformance.functionselect(state){
return{
visibleTodos:selectTodos(state.todos,state.visibilityFilter),visibilityFilter:state.visibilityFilter}}//包装component，注入dispatch和state到其默认的connect(select)(App)中；exportdefaultconnect(select)(App)
展示组件
components/AddTodorequired}
/
Footerrequired,filter:PropTypes.oneOf([
'SHOW_ALL','SHOW_ACTIVE'
]).isrequired}
/
Todorequired,text:PropTypes.string.isrequired,completed:PropTypes.bool.isrequired}
/
TodoListrequired,todos:PropTypes.arrayOf(PropTypes.shape({
text:PropTypes.string.isrequired,completed:PropTypes.bool.isrequired}).isrequired).isrequired}
