网站开发有限公司,网站建设合同需要交印花税吗,移动应用开发就业前景,网站点此项目模板是使用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
