Redux Todos Example

此項目模板是使用Create React App構建的，它提供了一種簡單的方法來啟動React項目而無需構建配置。
使用Create-React-App構建的項目包括對ES6語法的支持，以及幾種非官方/尚未最終形式的Javascript語法
先看效果

這個例子可以幫助你深入理解在 Redux 中 state 的更新與組件是如何共同運作的。
展示了 reducer 如何委派 action 給其它 reducer，也展示了如何使用 React Redux 從展示組件中生成容器組件。

//index.js 跟組件
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App'
import rootReducer from './reducers'const store = createStore(rootReducer)render(<Provider store={store}><App /></Provider>,document.getElementById('root')
)

先看action,action是對象

let nextTodoId = 0
// Action 本質上是 JavaScript 普通對象。我們約定，action 內必須使用一個字符串類型的 type 字段來表示將要執行的動作。
// 多數情況下，type 會被定義成字符串常量。當應用規模越來越大時，建議使用單獨的模塊或文件來存放 action。
export const addTodo = text => ({type: 'ADD_TODO',id: nextTodoId++,text
})export const setVisibilityFilter = filter => ({type: 'SET_VISIBILITY_FILTER',filter
})export const toggleTodo = id => ({type: 'TOGGLE_TODO',id
})export const VisibilityFilters = {SHOW_ALL: 'SHOW_ALL',SHOW_COMPLETED: 'SHOW_COMPLETED',SHOW_ACTIVE: 'SHOW_ACTIVE'
}

接下來看reducer
這個是combineReducers

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'export default combineReducers({todos,visibilityFilter
})

這個是reducer操作純函數

//純函數操作state
const todos = (state = [], action) => {switch (action.type) {case 'ADD_TODO':return [...state,{id: action.id,text: action.text,completed: false}]case 'TOGGLE_TODO':return state.map(todo =>(todo.id === action.id)? {...todo, completed: !todo.completed}: todo)default:return state}
}export default todos

visibilityFilter.js中是進行過濾函數

import { VisibilityFilters } from '../actions'const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {switch (action.type) {case 'SET_VISIBILITY_FILTER':return action.filterdefault:return state}
}export default visibilityFilter

//app.js
//這個是根APP組件
import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'const App = () => (<div><AddTodo /><VisibleTodoList /><Footer /></div>
)export default App

這個是footer.js

//這是一個footer組件
import React from 'react'
import FilterLink from '../containers/FilterLink'
import { VisibilityFilters } from '../actions'const Footer = () => (<div><span>Show: </span><FilterLink filter={VisibilityFilters.SHOW_ALL}>All</FilterLink><FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>Active</FilterLink><FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>Completed</FilterLink></div>
)
export default Footer

//link組件
import React from 'react'
import PropTypes from 'prop-types'const Link = ({ active, children, onClick }) => (<buttononClick={onClick}disabled={active}style={{marginLeft: '4px',}}>{children}</button>
)Link.propTypes = {active: PropTypes.bool.isRequired,children: PropTypes.node.isRequired,onClick: PropTypes.func.isRequired
}export default Link

//todo組件
import React from 'react'
import PropTypes from 'prop-types'const Todo = ({ onClick, completed, text }) => (<lionClick={onClick}style={{textDecoration: completed ? 'line-through' : 'none'}}>{text}</li>
)Todo.propTypes = {onClick: PropTypes.func.isRequired,completed: PropTypes.bool.isRequired,text: PropTypes.string.isRequired
}export default Todo

這個是todoList組件

import React from 'react'
import PropTypes from 'prop-types'
import Todo from './Todo'const TodoList = ({ todos, toggleTodo }) => (<ul>{todos.map(todo =><Todokey={todo.id}{...todo}onClick={() => toggleTodo(todo.id)}/>)}</ul>
)TodoList.propTypes = {todos: PropTypes.arrayOf(PropTypes.shape({id: PropTypes.number.isRequired,completed: PropTypes.bool.isRequired,text: PropTypes.string.isRequired}).isRequired).isRequired,toggleTodo: PropTypes.func.isRequired
}export default TodoList

接下來展示了如何使用 React Redux 從展示組件中生成容器組件。
在container中的是AddTodo.js

//addtodo.js
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'const AddTodo = ({ dispatch }) => {let inputreturn (<div><form onSubmit={e => {e.preventDefault()if (!input.value.trim()) {return}dispatch(addTodo(input.value))input.value = ''}}><input ref={node => input = node} /><button type="submit">Add Todo</button></form></div>)
}export default connect()(AddTodo)

//FilterLink.js
import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'const mapStateToProps = (state, ownProps) => ({active: ownProps.filter === state.visibilityFilter
})const mapDispatchToProps = (dispatch, ownProps) => ({onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
})export default connect(mapStateToProps,mapDispatchToProps
)(Link)

//VisibleTodoList.js
import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { VisibilityFilters } from '../actions'const getVisibleTodos = (todos, filter) => {switch (filter) {case VisibilityFilters.SHOW_ALL:return todoscase VisibilityFilters.SHOW_COMPLETED:return todos.filter(t => t.completed)case VisibilityFilters.SHOW_ACTIVE:return todos.filter(t => !t.completed)default:throw new Error('Unknown filter: ' + filter)}
}const mapStateToProps = state => ({todos: getVisibleTodos(state.todos, state.visibilityFilter)
})const mapDispatchToProps = dispatch => ({toggleTodo: id => dispatch(toggleTodo(id))
})export default connect(mapStateToProps,mapDispatchToProps
)(TodoList)