此項目模板是使用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)

轉載于:https://www.cnblogs.com/smart-girl/p/10782616.html

總結

以上是生活随笔為你收集整理的Redux Todos Example的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。