用redux完成事务清单

今天再来一个例子，我们从组件开始。

App.js

 import React, { PropTypes } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import Header from '../components/Header'
 import MainSection from '../components/MainSection'
 import * as TodoActions from '../actions'

 const App = ({todos, actions}) => (
   <div>
     <Header addTodo={actions.addTodo} /> //头部负责添加事项
     <MainSection todos={todos} actions={actions} />  //这是2个组件
   </div>
 )

 App.propTypes = {
   todos: PropTypes.array.isRequired,
   actions: PropTypes.object.isRequired  //todos是数组  actions是对象
 }

 const mapStateToProps = state => ({
   todos: state.todos
 })

 const mapDispatchToProps = dispatch => ({
     actions: bindActionCreators(TodoActions, dispatch)
 })

 export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(App)

head.js

 import React, { PropTypes, Component } from 'react'
 import TodoTextInput from './TodoTextInput'

 export default class Header extends Component {  //es6组建写法
   static propTypes = {
     addTodo: PropTypes.func.isRequired
   }

   handleSave = text => {
     if (text.length !== 0) {
       this.props.addTodo(text)
     }
   }

   render() {
     return (
       <header className="header">
         <h1>todos</h1>
         <TodoTextInput newTodo
                        onSave={this.handleSave} //添加事项
                        placeholder="What needs to be done?" />
       </header>
     )
   }
 }

TodoTextInput.js

 import React, { Component, PropTypes } from 'react'
 import classnames from 'classnames'

 export default class TodoTextInput extends Component {
   static propTypes = {
     onSave: PropTypes.func.isRequired,
     text: PropTypes.string,
     placeholder: PropTypes.string,
     editing: PropTypes.bool,
     newTodo: PropTypes.bool
   }

   state = {
     text: this.props.text || ''
   }

   handleSubmit = e => {
     const text = e.target.value.trim()
     if (e.which === 13) {
       this.props.onSave(text)  //保存文本值
       if (this.props.newTodo) {
         this.setState({ text: '' })
       }
     }
   }

   handleChange = e => {
     this.setState({ text: e.target.value })
   }

   handleBlur = e => {
     if (!this.props.newTodo) {
       this.props.onSave(e.target.value)
     }
   }

   render() {
     return (
       <input className={
         classnames({
           edit: this.props.editing,
           'new-todo': this.props.newTodo
         })}
         type="text"
         placeholder={this.props.placeholder} //what needs to be done?
         autoFocus="true"
         value={this.state.text}
         onBlur={this.handleBlur}
         onChange={this.handleChange}  //改变state里面的值
         onKeyDown={this.handleSubmit} /> //keycode=13 提交保存
     )
   }
 }

mainSection.js

 import React, { Component, PropTypes } from 'react'
 import TodoItem from './TodoItem'
 import Footer from './Footer'
 import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters' //过滤器

 const TODO_FILTERS = {
   [SHOW_ALL]: () => true,
   [SHOW_ACTIVE]: todo => !todo.completed,
   [SHOW_COMPLETED]: todo => todo.completed
 }

 export default class MainSection extends Component {
   static propTypes = {
     todos: PropTypes.array.isRequired,
     actions: PropTypes.object.isRequired
   }

   state = { filter: SHOW_ALL }

   handleClearCompleted = () => {
     this.props.actions.clearCompleted() //清除完成事项
   }

   handleShow = filter => {
     this.setState({ filter })  //根据过滤条件展示
   }

   renderToggleAll(completedCount) {
     const { todos, actions } = this.props
     if (todos.length > 0) {
       return (
         <input className="toggle-all"
                type="checkbox"
                checked={completedCount === todos.length} //是否全部完成
                onChange={actions.completeAll} />
       )
     }
   }

   renderFooter(completedCount) {
     const { todos } = this.props
     const { filter } = this.state
     const activeCount = todos.length - completedCount

     if (todos.length) {
       return (
         <Footer completedCount={completedCount}
                 activeCount={activeCount}
                 filter={filter}
                 onClearCompleted={this.handleClearCompleted.bind(this)}
                 onShow={this.handleShow.bind(this)} />
       )
     }
   }

   render() {
     const { todos, actions } = this.props
     const { filter } = this.state

     const filteredTodos = todos.filter(TODO_FILTERS[filter])  //初始值为showall 展示全部
     const completedCount = todos.reduce((count, todo) =>   //统计已完成事项
       todo.completed ? count + 1 : count,
       0
     )

     return (
       <section className="main">
         {this.renderToggleAll(completedCount)}
         <ul className="todo-list">
           {filteredTodos.map(todo =>
             <TodoItem key={todo.id} todo={todo} {...actions} />
           )}
         </ul>
         {this.renderFooter(completedCount)}
       </section>
     )
   }
 }

todoItems.js

 import React, { Component, PropTypes } from 'react'
 import classnames from 'classnames'
 import TodoTextInput from './TodoTextInput'

 export default class TodoItem extends Component {
   static propTypes = {
     todo: PropTypes.object.isRequired,
     editTodo: PropTypes.func.isRequired,
     deleteTodo: PropTypes.func.isRequired,
     completeTodo: PropTypes.func.isRequired
   }

   state = {
     editing: false
   }

   handleDoubleClick = () => {
     this.setState({ editing: true })
   }

   handleSave = (id, text) => {
     if (text.length === 0) {
       this.props.deleteTodo(id)
     } else {
       this.props.editTodo(id, text)   //编辑  不存在text则删除该项
     }
     this.setState({ editing: false })
   }

   render() {
     const { todo, completeTodo, deleteTodo } = this.props

     let element
     if (this.state.editing) {
       element = (
         <TodoTextInput text={todo.text}
                        editing={this.state.editing}
                        onSave={(text) => this.handleSave(todo.id, text)} />
       )
     } else {
       element = (
         <div className="view">
           <input className="toggle"
                  type="checkbox"
                  checked={todo.completed}
                  onChange={() => completeTodo(todo.id)} />
           <label onDoubleClick={this.handleDoubleClick}>  //双击修改为可编辑状态   会重新渲染
             {todo.text}
           </label>
           <button className="destroy"
                   onClick={() => deleteTodo(todo.id)} />
         </div>
       )
     }

     return (
       <li className={classnames({
         completed: todo.completed,
         editing: this.state.editing
       })}>
         {element}
       </li>
     )
   }
 }

footer.js

 import React, { PropTypes, Component } from 'react'
 import classnames from 'classnames'
 import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'

 const FILTER_TITLES = {
   [SHOW_ALL]: 'All',
   [SHOW_ACTIVE]: 'Active',
   [SHOW_COMPLETED]: 'Completed'
 }

 export default class Footer extends Component {
   static propTypes = {
     completedCount: PropTypes.number.isRequired,
     activeCount: PropTypes.number.isRequired,
     filter: PropTypes.string.isRequired,
     onClearCompleted: PropTypes.func.isRequired,
     onShow: PropTypes.func.isRequired
   }

   renderTodoCount() {
     const { activeCount } = this.props
     const itemWord = activeCount === 1 ? 'item' : 'items'  //此处语法经典

     return (
       <span className="todo-count">
         <strong>{activeCount || 'No'}</strong> {itemWord} left  //有多少未完成事项
       </span>
     )
   }

   renderFilterLink(filter) {
     const title = FILTER_TITLES[filter]
     const { filter: selectedFilter, onShow } = this.props

     return (
       <a className={classnames({ selected: filter === selectedFilter })}
          style={{ cursor: 'pointer' }}
          onClick={() => onShow(filter)}>
         {title}
       </a>
     )
   }

   renderClearButton() {
     const { completedCount, onClearCompleted } = this.props
     if (completedCount > 0) {
       return (
         <button className="clear-completed"
                 onClick={onClearCompleted} >
           Clear completed
         </button>
       )
     }
   }

   render() {
     return (
       <footer className="footer">
         {this.renderTodoCount()}
         <ul className="filters">
           {[ SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED ].map(filter =>
             <li key={filter}>
               {this.renderFilterLink(filter)}   //切换不同的过滤条件
             </li>
           )}
         </ul>
         {this.renderClearButton()}
       </footer>
     )
   }
 }

好了  这就是组件  比上次有点多  不过当成是训练    最重要的是把握整体结构

indes.js

 import * as types from '../constants/ActionTypes'

 export const addTodo = text => ({ type: types.ADD_TODO, text })
 export const deleteTodo = id => ({ type: types.DELETE_TODO, id })
 export const editTodo = (id, text) => ({ type: types.EDIT_TODO, id, text })  //这一看就是dispatch的内容
 export const completeTodo = id => ({ type: types.COMPLETE_TODO, id })
 export const completeAll = () => ({ type: types.COMPLETE_ALL })
 export const clearCompleted = () => ({ type: types.CLEAR_COMPLETED })

todo.js

 import { ADD_TODO, DELETE_TODO, EDIT_TODO, COMPLETE_TODO, COMPLETE_ALL, CLEAR_COMPLETED } from '../constants/ActionTypes'

 const initialState = [
   {
     text: 'Use Redux',
     completed: false,
     id: 0               //初始化state
   }
 ]

 export default function todos(state = initialState, action) {
   switch (action.type) {
     case ADD_TODO:
       return [
         {
           id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1, //确定id值
           completed: false,
           text: action.text
         },
         ...state
       ]

     case DELETE_TODO:
       return state.filter(todo =>
         todo.id !== action.id
       )

     case EDIT_TODO:
       return state.map(todo =>
         todo.id === action.id?
         (...todo,{text:action.text}):
          todo
       )

     case COMPLETE_TODO:
       return state.map(todo =>
         todo.id === action.id ?
           { ...todo, completed: !todo.completed } : //用于切换
           todo
       )

     case COMPLETE_ALL:
       const areAllMarked = state.every(todo => todo.completed) //全部完成 或全部未完成
       return state.map(todo => ({
         ...todo,
         completed: !areAllMarked
       }))

     case CLEAR_COMPLETED:
       return state.filter(todo => todo.completed === false)

     default:
       return state
   }
 }

index.js  整合reducers

 import { combineReducers } from 'redux'
 import todos from './todos'

 const rootReducer = combineReducers({
   todos
 })

 export default rootReducer

好了  代码就这么多  这一次reducers倒不是很复杂  反倒组件有点乱   总之是单向数据流动，根据action的类型做出相应的改变，最后重新render。。。