网站推广专员面试,少儿编程加盟店8,网站建设论文标题,深圳建设局网和住房网此项目模板是使用Create React App构建的#xff0c;它提供了一种简单的方法来启动React项目而无需构建配置。 使用Create-React-App构建的项目包括对ES6语法的支持#xff0c;以及几种非官方/尚未最终形式的Javascript语法 先看效果 这个例子可以帮助你深入理解在 Redux 中 …此项目模板是使用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 ./reducersconst 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 ./visibilityFilterexport 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 todosvisibilityFilter.js中是进行过滤函数 import { VisibilityFilters } from ../actionsconst 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/VisibleTodoListconst App () (divAddTodo /VisibleTodoList /Footer //div )export default App 这个是footer.js //这是一个footer组件 import React from react import FilterLink from ../containers/FilterLink import { VisibilityFilters } from ../actionsconst Footer () (divspanShow: /spanFilterLink filter{VisibilityFilters.SHOW_ALL}All/FilterLinkFilterLink filter{VisibilityFilters.SHOW_ACTIVE}Active/FilterLinkFilterLink filter{VisibilityFilters.SHOW_COMPLETED}Completed/FilterLink/div ) export default Footer //link组件 import React from react import PropTypes from prop-typesconst 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-typesconst 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 ./Todoconst 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 ../actionsconst AddTodo ({ dispatch }) {let inputreturn (divform onSubmit{e {e.preventDefault()if (!input.value.trim()) {return}dispatch(addTodo(input.value))input.value }}input ref{node input node} /button typesubmitAdd Todo/button/form/div) }export default connect()(AddTodo)//FilterLink.js import { connect } from react-redux import { setVisibilityFilter } from ../actions import Link from ../components/Linkconst 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 ../actionsconst 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