redux实现todos

56 阅读 0 评论 37 点赞

我是靠谱客的博主任性爆米花，最近开发中收集的这篇文章主要介绍redux实现todos，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

使用react-redux实现todos

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
var nextTodoId = 4;
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false,
};
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
}
return {
...state,
completed: !state.completed,
};
default:
return state;
}
};
// reducer
const todos = (
state = [
{ text: 'a', id: 0, completed: true },
{ text: 'b', id: 1, completed: false },
{ text: 'c', id: 2, completed: false },
],
action,
) => {
switch (action.type) {
case 'ADD_TODO':
console.log([...state, todo(undefined, action)]);
return [...state, todo(undefined, action)];
case 'TOGGLE_TODO':
return state.map(t => todo(t, action));
default:
return state;
}
};
const visibilityFilter = (state = 'SHOW_ALL', action) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
};
// 合并两个reducer
const todoApp = combineReducers({
todos,
visibilityFilter,
});
// store
const store = createStore(todoApp, applyMiddleware(thunkMiddleware));
// view
const Counter = ({ todos, dispatch, visibilityFilter }) => {
let input1;
handleAdd = () => {
if (!input1.value.trim()) {
return;
}
dispatch({
type: 'ADD_TODO',
id: nextTodoId++,
text: input1.value,
});
input1.value = '';
};
return (
<div>
<input
type="text"
ref={node => {
input1 = node;
}}
/>
<button onClick={handleAdd}>add</button>
<ul>
{todos.map(todo =>
<li
key={todo.id}
{...todo}
onClick={() => {dispatch({
type: 'TOGGLE_TODO',
id: todo.id
})} }
style={{
fontSize: '30px',
textDecoration: todo.completed ? 'line-through' : 'none',
color: todo.completed ? 'red' : 'green'
}}
>
{todo.text}
</li>,
)}
</ul>
<p>
<span
onClick={() => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_ALL',
});
}}
>
{visibilityFilter == 'SHOW_ALL'
? <span>显示所有 &nbsp;&nbsp;</span>
: <a>显示所有 &nbsp;&nbsp;</a>}
</span>
<span
onClick={() => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_ACTIVE',
});
}}
>
{visibilityFilter == 'SHOW_ACTIVE'
? <span>激活状态 &nbsp;&nbsp;</span>
: <a>激活状态 &nbsp;&nbsp;</a>}
</span>
<span
onClick={() => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED',
});
}}
>
{visibilityFilter == 'SHOW_COMPLETED'
? <span>完成状态 &nbsp;&nbsp;</span>
: <a>完成状态 &nbsp;&nbsp;</a>}
</span>
</p>
</div>
);
};
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos;
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed);
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed);
default:
throw new Error('Unknown filter: ' + filter);
}
};
// container
const mapStateToProps = state => ({
todos: getVisibleTodos(state.todos, state.visibilityFilter),
visibilityFilter: state.visibilityFilter,
});
const CounterContainer = connect(mapStateToProps)(Counter);
// connect to store
const App = (
<Provider store={store}>
<CounterContainer />
</Provider>
);
ReactDOM.render(App, mountNode);