react和redux的应用例子

模块化React和Redux应用

ToDoApp待办事项记录

1. 实现功能：

• 添加任务

• 删除任务

• 完成任务勾选

• 按全部、已完成、未完成筛选任务

2. 目录结构：

目录结构

分为两个模块：

①添加删除切换事项划分为一个模块todos

②筛选事项为一个模块filter

3. 效果展示：

效果图

4.详细说明：
（1）需要用的的state:

{
    todos: [
    {
        id: action.id,     //唯一id编号
        text: action.text, //事项内容
        completed: false   //是否完成了
    }, ...],
    filter: "All"          //过滤的三种状态中的一种
}

（2）在页面上可以看到全部，已完成，未完成这些都是固定死的，我们可以把他放到一个文件，之后可以取出显示到界面

// constants.js
export const FilterTypes = {
  ALL: '全部',
  COMPLETED: '已完成',
  UNCOMPLETED: '未完成'
}

（3）入口函数

// index.js
import { Provider} from 'react-redux';
import TodoApp from './TodoApp';
  <Provider store={store}>
    <TodoApp />
  </Provider>,

用Provider包裹住最顶层的组件TodoApp，也放在了主目录下，包含两个模块的组件

// TodoApp
import { view as Todos } from "./todos/";
import { view as Filter } from "./filter/";
<div>
    <Todos/>
    <Filter/>
</div>

（4）接下来就先看看todos模块，index文件中主要用于export写好的view, reducer, actions

// index.js
import * as actions from './actions.js';
import reducer from './reducer.js';
import view from './views/todos.js';
export {actions, reducer, view};

①actions

用户的操作主要是删除，切换事项状态，删除，那么action就要对应三个，我们还是把action分为两个文件，一个是类型，另一个是需要派发的参数

import {ADD_TODO, TOGGLE_TODO, REMOVE_TODO} from './actionTypes.js';
let nextTodoId = 0; // 用于设置自增的id
export const addTodo = (text) => ({
  type: ADD_TODO,
  completed: false,
  id: nextTodoId ++,
  text: text
});
export const toggleTodo = (id) => ({
  type: TOGGLE_TODO,
  id: id
});
export const removeTodo = (id) => ({
  type: REMOVE_TODO,
  id: id
});

②reducer

根据派发的action，state来做出相应的更新修改，并加上原来的state

import {ADD_TODO, TOGGLE_TODO, REMOVE_TODO}from './actionTypes.js';
export default (state = [], action) => {
  switch(action.type) {
    case ADD_TODO: {
      return [
        {
          id: action.id,
          text: action.text,
          completed: false
        },
        ...state
      ]
    }
    case TOGGLE_TODO: {
      return state.map((todoItem) => {
        if (todoItem.id === action.id) {
           return {...todoItem, completed: !todoItem.completed};
        } else {
          return todoItem;
        }
      })
    }
    case REMOVE_TODO: {
      return state.filter((todoItem) => {
        return todoItem.id !== action.id;
      })
    }
    default: {
      return state;
    }
  }
}

③view视图

// addTodo.js
import {addTodo} from '../actions.js';
// 添加事项时，只需要this.props.onAdd(text)即可调用函数
class AddTodo extends Component { 
  constructor(props, context) { //注意带上context
    super(props, context);
    ...
  }
   ...
}
AddTodo.propTypes = {
  onAdd: PropTypes.func.isRequired
};
const mapDispatchToProps = (dispatch) => {
  return {
    onAdd: (text) => {
      dispatch(addTodo(text)); //调用action获取type等参数
    }
  }
};
export default connect(null, mapDispatchToProps)(AddTodo);

由于这个组件不需要从state中取用数据，所以connect的第一个参数为null

（5）filter的实现方式类似，就不用多解释了，但是我们发现这两个模块都有自己的reducer，但是createStore函数值接收一个

import {createStore, combineReducers, applyMiddleware, compose} from 'redux';

import {reducer as todoReducer} from './todos';
import {reducer as filterReducer} from './filter';

import Perf from 'react-addons-perf'

const win = window;
win.Perf = Perf

const reducer = combineReducers({
  todos: todoReducer,
  filter: filterReducer
});
export default createStore(reducer, {}, storeEnhancers);

我们可以通过Redux提供的combineReducers合并这两个reducer，传入的是一个对象，用来区分这两个reducer。在事项列表中

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
//import {bindActionCreators} from 'redux';
import TodoItem from './todoItem.js';
import {toggleTodo, removeTodo} from '../actions.js';
import {FilterTypes} from '../../constants.js';

const TodoList = ({todos, onToggleTodo, onRemoveTodo}) => {
  return (
    <ul className="todo-list">
    {
      todos.map((item) => (
        <TodoItem
          key={item.id}
          text={item.text}
          completed={item.completed}
          onToggle={() => onToggleTodo(item.id)}
          onRemove={() => onRemoveTodo(item.id)}
        />
        ))
    }
    </ul>
  );
};

TodoList.propTypes = {
  todos: PropTypes.array.isRequired
};

const selectVisibleTodos = (todos, filter) => {
  switch (filter) {
    case FilterTypes.ALL:
      return todos;
    case FilterTypes.COMPLETED:
      return todos.filter(item => item.completed);
    case FilterTypes.UNCOMPLETED:
      return todos.filter(item => !item.completed);
    default:
      throw new Error('unsupported filter');
  }
}

const mapStateToProps = (state) => {
  return {
    todos: selectVisibleTodos(state.todos, state.filter)
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    onToggleTodo: (id) => {
      dispatch(toggleTodo(id));
    },
    onRemoveTodo: (id) => {
      dispatch(removeTodo(id));
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

从上面的mapDispatchToProps可以看出，代码似乎有点冗余，明明是差不多的代码，都要经过dispatcher分发。redux提供了一种更简便的一种写法，直接从prop到action函数的映射：

const mapDispatchToProps = (dispatch) => bindActionCreators({
  onToggleTodo: toggleTodo,
  onRemoveTodo: removeTodo
}, dispatch);

（6）当我们向视图中添加样式，可以直接引入文件，如：

import './style.css'