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/AddTodoodoextendsComponent{ render(){ return( <div> <inputtype='text'ref='input'/> <buttononClick={(e)=>this.handleClick(e)}> Add</button> </div> ) } handleClick(e){ constnode=this.refs.inputconsttext=node.value.trim() this.props.onAddClick(text) node.value='' }}AddTodo.propTypes={ onAddClick:PropTypes.func.isrequired}

/Footerrequired,filter:PropTypes.oneOf([ 'SHOW_ALL','SHOW_ACTIVE' ]).isrequired}

/TodosstodoextendsComponent{ render(){ return( <li onClick={this.props.onClick} style={{ textdecoration:this.props.completed?'line-through':'none',cursor:this.props.completed?'default':'pointer' }}> {this.props.text} </li> ) }}Todo.propTypes={ onClick:PropTypes.func.isrequired,text:PropTypes.string.isrequired,completed:PropTypes.bool.isrequired}

/TodoListottom:0px;background-color:rgb(247,PropTypes}from'react'importTodofrom'./Todo'exportdefaultclasstodoListextendsComponent{ render(){ return( <ul> {this.props.todos.map((todo,index)=> <Todo{...todo} key={index} onClick={()=>this.props.onTodoClick(index)}/> )} </ul> ) }}TodoList.propTypes={ onTodoClick:PropTypes.func.isrequired,todos:PropTypes.arrayOf(PropTypes.shape({ text:PropTypes.string.isrequired,completed:PropTypes.bool.isrequired}).isrequired).isrequired}

原文地址：https://www.jb51.cc/react/303164.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。