模块化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'
