[Redux] React Todo List Example (Toggling a Todo)

80 阅读 0 评论 53 点赞

我是靠谱客的博主神勇音响，这篇文章主要介绍[Redux] React Todo List Example (Toggling a Todo)，现在分享给大家，希望可以做个参考。

复制代码

/**
* A reducer for a single todo
* @param state
* @param action
* @returns {*}
*/
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;
}
};
/**
* The reducer for the todos
* @param state
* @param action
* @returns {*}
*/
const todos = ( state = [], action ) => {
switch ( action.type ) {
case 'ADD_TODO':
return [
...state,
todo( undefined, action )
];
case 'TOGGLE_TODO':
return state.map( t => todo( t, action ) );
default:
return state;
}
};
/**
* Reducer for the visibilityFilter
* @param state
* @param action
* @returns {*}
*/
const visibilityFilter = ( state = 'SHOW_ALL',
action ) => {
switch ( action.type ) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
};
/**
* combineReducers: used for merge reducers togethger
* createStore: create a redux store
*/
const { combineReducers, createStore } = Redux;
const todoApp = combineReducers( {
todos,
visibilityFilter
} );
const store = createStore( todoApp );
/**
* For generate todo's id
* @type {number}
*/
let nextTodoId = 0;
/**
* React related
*/
const {Component} = React;
class TodoApp extends Component {
render() {
return (
<div>
<input ref={
(node)=>{
this.input = node
}
}/>
<button onClick={
()=>{
//After clicking the button, dispatch a add todo action

store.dispatch({
type: 'ADD_TODO',
id: nextTodoId++,
text: this.input.value
})
this.input.value = "";
}
}>ADD todo
</button>
<ul>
//loop thought the todo list
{this.props.todos.map( ( todo )=> {
return (
<li key={todo.id}

style={{
textDecoration: todo.completed ?
'line-through' : 'none'
}}
onClick={ ()=>{
store.dispatch({
type: 'TOGGLE_TODO',
id: todo.id
})
}}
>
{todo.text}
</li>

)
} )}
</ul>
</div>

);
}
}
const render = () => {
ReactDOM.render(
<TodoApp todos={store.getState().todos}></TodoApp>,
document.getElementById( 'root' )
);
};
//Every time, store updated, also fire the render() function
store.subscribe( render );
render();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
/**
* A reducer for a single todo
* @param state
* @param action
* @returns {*}
*/
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;
}
};
/**
* The reducer for the todos
* @param state
* @param action
* @returns {*}
*/
const todos = ( state = [], action ) => {
switch ( action.type ) {
case 'ADD_TODO':
return [
...state,
todo( undefined, action )
];
case 'TOGGLE_TODO':
return state.map( t => todo( t, action ) );
default:
return state;
}
};
/**
* Reducer for the visibilityFilter
* @param state
* @param action
* @returns {*}
*/
const visibilityFilter = ( state = 'SHOW_ALL',
action ) => {
switch ( action.type ) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
};
/**
* combineReducers: used for merge reducers togethger
* createStore: create a redux store
*/
const { combineReducers, createStore } = Redux;
const todoApp = combineReducers( {
todos,
visibilityFilter
} );
const store = createStore( todoApp );
/**
* For generate todo's id
* @type {number}
*/
let nextTodoId = 0;
/**
* React related
*/
const {Component} = React;
class TodoApp extends Component {
render() {
return (
<div>
<input ref={
(node)=>{
this.input = node
}
}/>
<button onClick={
()=>{
//After clicking the button, dispatch a add todo action

store.dispatch({
type: 'ADD_TODO',
id: nextTodoId++,
text: this.input.value
})
this.input.value = "";
}
}>ADD todo
</button>
<ul>
//loop thought the todo list
{this.props.todos.map( ( todo )=> {
return (
<li key={todo.id}

style={{
textDecoration: todo.completed ?
'line-through' : 'none'
}}
onClick={ ()=>{
store.dispatch({
type: 'TOGGLE_TODO',
id: todo.id
})
}}
>
{todo.text}
</li>

)
} )}
</ul>
</div>

);
}
}
const render = () => {
ReactDOM.render(
<TodoApp todos={store.getState().todos}/>,
document.getElementById( 'root' )
);
};
//Every time, store updated, also fire the render() function
store.subscribe( render );
render();