摘要：發(fā)現(xiàn)最近看到的框架入門(mén)程序都變成，我花了三個(gè)小時(shí)才自己實(shí)現(xiàn)了一個(gè)感嘆前端入門(mén)越來(lái)越復(fù)雜了，懷念幾年前還是的時(shí)代。。。主要負(fù)責(zé)的渲染，和那個(gè)框的功能。利用對(duì)的值進(jìn)行控制，然后監(jiān)聽(tīng)鍵盤(pán)來(lái)判斷是輸入還是提交。需要講解的不多。。。

發(fā)現(xiàn)最近看到的框架入門(mén)程序都變成Todos，我花了三個(gè)小時(shí)才自己實(shí)現(xiàn)了一個(gè)Todos...感嘆前端入門(mén)越來(lái)越復(fù)雜了，懷念幾年前還是hello world的時(shí)代。。。

吐槽不多說(shuō)，這里主要說(shuō)的只是React和Redux這一塊兒，css樣式完全是從這里抄過(guò)來(lái)的。

代碼的結(jié)構(gòu)準(zhǔn)備是這個(gè)樣子的：

轉(zhuǎn)化成代碼結(jié)構(gòu)，就是這個(gè)樣子：

另外，按照官方示例，在Header左邊的toggleAll按鈕放到了Section中。

在Redux中，type是用于action和reducer交流的時(shí)候的一個(gè)flag，讓reducer知道這是一個(gè)什么請(qǐng)求。

我比較習(xí)慣把type多帶帶分離出來(lái)，列到一個(gè)文件里面，讓Redux的文件更干凈，并便于管理。

/** ------------------------- TODO ---------------------*/
export const TODO_INSERT_ITEM = "TODO_INSERT_ITEM";
export const TODO_DELETE_ITEM = "TODO_DELETE_ITEM";
export const TODO_SWITCH_FILTER = "TODO_SWITCH_FILTER";
export const TODO_TOGGLE_ACTIVE = "TODO_TOGGLE_ACTIVE";
export const TODO_TOGGLE_ALL = "TODO_TOGGLE_ALL";
export const TODO_CHANGE_VALUE = "TODO_CHANGE_VALUE";
export const TODO_CLEAR_COMPLETED = "TODO_CLEAR_COMPLETED";

根據(jù)上面列出的type，列出對(duì)應(yīng)的action creator

import { TODO_INSERT_ITEM, TODO_DELETE_ITEM, TODO_SWITCH_FILTER, TODO_TOGGLE_ACTIVE, TODO_TOGGLE_ALL, TODO_CHANGE_VALUE, TODO_CLEAR_COMPLETED } from "../types";

// 插入一個(gè)TODO 
export function insertItem(value){
  return {
    type: TODO_INSERT_ITEM,
    value
  };
}

// 刪除一個(gè)TODO
export function deleteItem(id) {
  return {
    type: TODO_DELETE_ITEM,
    id
  }
}

// 轉(zhuǎn)換一個(gè)TODO的狀態(tài)
export function switchFilter(filter) {
  return {
    type: TODO_SWITCH_FILTER,
    filter
  }
}

// 清楚所有完成的TODO
export function clearCompleted(){
  return {
    type: TODO_CLEAR_COMPLETED
  }
}

export function toggleActive(id){
  return {
    type: TODO_TOGGLE_ACTIVE,
    id
  }
}

// 轉(zhuǎn)換所有的狀態(tài)到active
export function toggleAll(active){
  return {
    type: TODO_TOGGLE_ALL,
    active
  }  
}

// 改變對(duì)應(yīng)TODO的值
export function changeValue(id, value) {
  return {
    type: TODO_CHANGE_VALUE,
    id,
    value
  }
}

在reducer中需要注意幾點(diǎn)：

初始化的state要從localStorage中獲取

每次做出修改，都要重新更新localStorage

數(shù)據(jù)沒(méi)有發(fā)生改變的時(shí)候，盡量使用原數(shù)據(jù)，減少re-render

為了便于查找，我在這里用了lodash的uniqueId方法，給每一個(gè)item加一個(gè)id

為了便于儲(chǔ)存和展示，我這里包含一個(gè)items用來(lái)保存所有的items，一個(gè)showedItems用來(lái)儲(chǔ)存需要展示的items

先提供一個(gè)簡(jiǎn)單的簡(jiǎn)寫(xiě)localStorage方法

const local = (function(KEY){
  return {
    set: value=>{ localStorage.setItem(KEY, value) },
    get: ()=>localStorage.getItem(KEY),
    check: ()=>localStorage.getItem(KEY) != undefined
  };
})("todo");

然后幾個(gè)輔助的方法：

// 制造一個(gè)新的item
function generateItem(value) {
  return {
    id: _.uniqueId(),
    active: true,
    value
  }
}

// 判斷當(dāng)前的item是否正在展示
function include(active, filter) {
  return filter === "ALL" || (active && filter === "ACTIVE")  || (!active && filter === "COMPLETED");
}

// 獲取頁(yè)面上需要展示的items
function getShowedItems(items, filter) {
  let showedItems = [], keys = Object.keys(items);
  for(let i = 0; i < keys.length; i++){
    let item = items[keys[i]];

    if(include(item.active, filter)) {
      showedItems.push(item);
    }
  }
  return showedItems;
}

初始化的時(shí)候，獲取localStorage中的值，或者給一個(gè)默認(rèn)值：

let defaultTodo;
(function(){
  if(local.check()) {
    defaultTodo = JSON.parse(local.get());
  } else {
    defaultTodo = {
      items: {},
      filter: "ALL", // ALL, COMPLETED, ACTIVE
      count: 0,
      showedItems: [],
      hasCompleted: false
    }
  }
})();

注：在這里提一句，由于我不喜歡文檔中把所有的處理方法放在一個(gè)函數(shù)里面的方式，所以我寫(xiě)了一個(gè)方法，把reducers分開(kāi)成多個(gè)函數(shù)

// 很簡(jiǎn)單，其實(shí)就是循環(huán)調(diào)用。。。
export function combine(reducers){
  return (state, action) => {
    for(let key in reducers) {
      if(reducers.hasOwnProperty(key)) {
          state = reducers[key](state, action) || state;
      }
    }
    return state;
  }
} 

下面上所有的reducers，具體邏輯就不多說(shuō)了：

let exports = {};
exports.insertItem = function(state = defaultTodo, action) {
  const type = action.type;

  if(type === TODO_INSERT_ITEM) {
    let { count, items, filter, showedItems } = state;
    let item = generateItem(action.value);

    items = {
      ...items,
      [item.id] : item 
    }

    count = count + 1;
    
    state = {
      ...state,
      items,
      count,
      showedItems: filter !== "COMPLETED" ? getShowedItems(items, filter) : showedItems
    }

    local.set(JSON.stringify(state));
  }

  return state;
}

exports.deleteItem = function(state = defaultTodo, action) {
  const type = action.type;

  if(type === TODO_DELETE_ITEM && state.items[action.id]) {
    let { count, items, filter, hasCompleted } = state;
    let item = items[action.id];

    delete items[action.id];
    if(item.active) count--;
    
    state = {
      ...state,
      items,
      count,
      showedItems: include(item.active, filter) ? getShowedItems(items, filter) : state.showedItems,
      hasCompleted: Object.keys(items).length !== count
    }

    local.set(JSON.stringify(state));
  }

  return state;
}

exports.switchFilter = function(state = defaultTodo, action) {
  const type = action.type;
  if(type === TODO_SWITCH_FILTER && state.filter !== action.filter) {
    state = {
      ...state,
      filter: action.filter,
      showedItems: getShowedItems(state.items, action.filter)
    }

    local.set(JSON.stringify(state));
  }

  return state;
}

exports.clearCompleted = function(state = defaultTodo, action) {
  const type = action.type;
  if(type === TODO_CLEAR_COMPLETED) {
    let { items, filter, showedItems } = state;

    let keys = Object.keys(items);
    let tempItems = {};
    for(let i = 0; i < keys.length; i++) {
      let item = items[keys[i]];
      if(item.active) {
        tempItems[item.id] = item;
      }
    }

    state = {
      ...state,
      items: tempItems,
      showedItems: filter === "ACTIVE" ? showedItems : getShowedItems(tempItems, filter),
      hasCompleted: false
    }
    local.set(JSON.stringify(state));
  }

  return state;
}

exports.toggleActive = function(state = defaultTodo, action) {
  const { type, id } = action;

  if(type === TODO_TOGGLE_ACTIVE && state.items[id]) {
    let { items, filter, count, showedItems } = state;
    
    let item = items[id];
    item.active = !item.active;
    
    items = {
      ...items,
      [id]: item
    };

    if(item.active) count++; // 如果變?yōu)閍ctive
    else count--; // 如果變?yōu)閏ompleted

    state = {
      ...state,
      items,
      count,
      showedItems: getShowedItems(items, filter),
      hasCompleted: Object.keys(items).length !== count
    }

    local.set(JSON.stringify(state));
  }
  return state;
}

exports.toggleAll = function(state = defaultTodo, action) {
  const { type, active } = action;

  if(type === TODO_TOGGLE_ALL) {
    let { items, filter, showedItems } = state;
    let keys = Object.keys(items);
    
    for(let i = 0; i < keys.length; i++) {
      items[keys[i]].active = active;
    }

    let count = active ? keys.length : 0; 

    state = {
      ...state,
      items,
      count,
      showedItems: include(active, filter) ? getShowedItems(items, filter) : showedItems,
      hasCompleted: !active
    }

    local.set(JSON.stringify(state));
  }
  return state;
}

exports.changeValue = function(state = defaultTodo, action){
  const { type, id } = action;

  if(type === TODO_CHANGE_VALUE && state.items[id]) {
    let { items, filter, showedItems } = state;
    let item = items[id];

    item.value = action.value;

    items = {
      ...items,
      [id]: item    
    };

    state = {
      ...state,
      items,
      showedItems: include(item.active, filter) ? getShowedItems(items, filter) : showedItems
    }
    local.set(JSON.stringify(state));
  }
  return state;
}

export default combine(exports); // 用combine方法包裹

Reducers中，我在很多的showedItems都做了是否發(fā)生改變的檢查，如果沒(méi)有發(fā)生改變，那么就用原來(lái)的，便于在Section組件中，可以避免不必要的重新渲染。雖然，在我這里似乎沒(méi)有什么用。不過(guò)對(duì)復(fù)雜的項(xiàng)目還是有必要的。

import React from "react";
import Header from "containers/ToDo/Header";
import Footer from "containers/ToDo/Footer";
import Section from "containers/ToDo/Section";
import "components/ToDo/index.scss";

export default class ToDo extends React.Component {
  constructor(props) {
    super(props);
  }

  render(){
    return (
      

        

        

        
    )
  }
}

Header.js主要負(fù)責(zé)logo的渲染，和那個(gè)input框的功能。

利用controlled component對(duì)input的值進(jìn)行控制，然后監(jiān)聽(tīng)鍵盤(pán)來(lái)判斷是輸入還是提交。

import React from "react";
import { CONTROLS } from "utils/KEYCODE";
import { connect } from "react-redux";
import { insertItem } from "actions/todo";

class Header extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };
  }

  onChange = (e)=>{
    let value = e.target.value;
    this.setState({
      value
    });
  }

  onKeyDown = (e)=>{
    let keyCode = e.keyCode;

    if(keyCode === CONTROLS.ENTER && this.state.value !== "") {
      this.props.insertItem(this.state.value);
      this.setState({
        value: ""
      });

      e.preventDefault();
      e.stopPropagation();
    }
  }

  render(){
    return (
      

        
todos
        
      
    )
  }
}

export default connect(null, { insertItem })(Header);

Footer主要是用于展示數(shù)量，filter, Clear Completed按鈕

import React, { PropTypes } from "react";
import { connect } from "react-redux";
import { switchFilter, clearCompleted } from "actions/todo";

class Footer extends React.Component {
  constructor(props) {
    super(props);
  }

  switchFilter = (filter)=>{
    this.props.switchFilter(filter.toUpperCase());
  }

  render(){
    const { count, hasCompleted, filter, clearCompleted } = this.props;

    if(count === 0 && !hasCompleted) return null;

    return (
      
    )
  }
}

Footer.propTypes = {
  count: PropTypes.number.isRequired,
  hasCompleted: PropTypes.bool.isRequired,
  filter: PropTypes.oneOf(["ALL", "ACTIVE", "COMPLETED"]).isRequired
}

function mapStateToProps(state){
  let {
    todo: {
      count,
      hasCompleted,
      filter
    }
  } = state;

  return {
    count,
    hasCompleted,
    filter
  }
}

export default connect(mapStateToProps, { switchFilter, clearCompleted })(Footer);

Section包含Todos的列表，還有刪除, 改變狀態(tài)，修改value, toggle all等功能。

import React, { PropTypes } from "react";
import { connect } from "react-redux";
import { deleteItem, toggleActive, toggleAll, changeValue } from "actions/todo";
import Item from "components/ToDo/Item";

class Section extends React.Component {
  constructor(props) {
    super(props);
  }

  render(){
    const { showedItems=[], count, toggleAll, changeValue, deleteItem, toggleActive, hasCompleted } = this.props;

    return (
      

        { toggleAll(count === 0) }} checked={count === 0 && hasCompleted} />
        

          {
            showedItems.map(item=>)
          }
        
      
    )
  }
}

Section.propTypes = {
  showedItems: PropTypes.arrayOf(PropTypes.object).isRequired,
  count: PropTypes.number.isRequired
}

function mapStateToProps(state) {
  let {
    todo: {
      showedItems,
      count,
      hasCompleted
    }
  } = state;

  return {
    showedItems,
    count,
    hasCompleted
  };
}

export default connect(mapStateToProps, { deleteItem, toggleActive, toggleAll, changeValue })(Section);

import React from "react";
import ReactDOM from "react-dom";

export default class Item extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: props.value, editing: false };
  }

  componentDidUpdate() {
    if(this.state.editing) {
      var node = ReactDOM.findDOMNode(this.edit);
      node.focus();
    }
  }

  inputInstance = (input) => {
    this.edit = input;
  }

  onToggle = (e)=>{
    this.props.toggleActive(this.props.id, !e.target.checked);
  }

  onValueChange = (e)=>{
    this.props.onValueChange(this.props.id, e.target.value);
    this.setState({
      editing: false
    });
  }

  onEditChange = (e)=>{
    this.setState({
      value: e.target.value
    });
  }

  onDoubleClick = (e)=>{
    this.setState({
      editing: true
    });
  }

  render(){
    let { id, active, onItemDelete, onValueChange } = this.props;
    let { value, editing } = this.state;

    return (
      

        { editing || (

          
          {value}
          { onItemDelete(id) }}>
        
)
        }
        { editing &&  }
      
    )
  }
}

寫(xiě)組件的時(shí)候，感覺(jué)代碼貼出來(lái)看看就好了。需要講解的不多。。。