滨州正规网站建设公司,互联网企业有哪些行业,一个网站的建设流程图,建设网站哪好Redux
是js容器#xff0c;用于进行全局的 状态管理它可以用在react, angular, vue等项目中, 但基本与react配合使用三大核心#xff1a; 单一数据源 整个应用的state被存储在一棵 object tree中#xff0c;并且这个 object tree只存在于一个唯一的 store 中 State是只读的…Redux
是js容器用于进行全局的 状态管理它可以用在react, angular, vue等项目中, 但基本与react配合使用三大核心 单一数据源 整个应用的state被存储在一棵 object tree中并且这个 object tree只存在于一个唯一的 store 中 State是只读的 唯一改变state的方法就是触发actionaction 是一个用来描述已发生事件的普通对象 使用纯函数来修饰 为了描述 action 如何改变state tree需要编写 reducers;reducer 是纯函数 它接收先前的 state 和 action,并且返回新的 state.可以复用可以控制顺序、传入附加参数 Redux组成 state: 指传递的 数据 可以分为以下三类DomainDate: 服务端的数据UI state: 展示ui 状态等App state: App级别的状态 Action: 把数据从应用传到 store 的载体它是 store 数据的唯一来源。一般来说可以通过 store.dispatch() 将 action 传递给 storejs对象 用来描述已发生事件的普通对象 对象内部必须要有一个 type 属性来表示要执行的动作 Reducer: 函数用来响应发送过来的action,然后经过处理把 state 发送给 store注意需要 return 返回值 函数会接受两个参数第一个是初始化的state,第二个是action Store : store就是把 action 与 reducer 联系到一起的对象通过creatStore创建 React-redux React-redux概述 react-redux 是 redux 官方出的 用于配合 react 的绑定库react-redux 能够使你的 react 组件从 redux store 中方便的读取数据 并且向 store 中分发 actions 以此来更新数据两个重要成员 Provider 和 connectProvider Provider 包裹 在根组件最外层使所有组件都可以拿到 stateProvider 接收 store 作为props,然后通过 context 往下传递这样 react中任何组件都可以通过 cntext 获取到 store import { Provider } from react-redux;ReactDOM.render(Provider store{store}...字组件.../Provider,document.getElementById(root));connect Provider 内部组件如果想要使用到 state中的数据就必须要 connect 进行一层包裹换句话说就是必须要被 connect 进行加强connect 就是方便我们组件能够获取到 store中的 state
React-redux基本使用
安装 yarn add react-reduxnpm install react-redux//react-redux 还需要依赖 redux 中的 store,所以还需要安装 redux
npm install redux用 redux 来构建 store 创建 reducer/index.js 文件构建reducer来响应 actions创建 store/index.js 文件通过createStore方法把reducer 传进来 //store/index.jsimport { createStore } from reduximport { reducer } from ./reducerexport default createStore(reducer)// reducer/index.js const initState { count:0 }export.reducer ( state inistate, action ) {switch (action.type){case add_action:return {count: state.count 1}default: return state;}}在 app.js中引入 store 引入 Provider 组件 在app.js 中 导入 Provider 组件利用 Provider 组件将整个结构进行包裹并传递 store import { Provider } from react-reduxfunction App(){return (Provider store{store} ... /Provider)}connect 使用 导入调用connect 方法会有一个返回值而返回值就是加强之后的组件 import { connect } from react-reduxconnect(mapStateToProps,mapDispatchToProps) (Cpmponent)connect 参数说明 mapStateToProps(state,ownProps) 函数类型主要用来获取store中的数据mapDispatchToProps(dispatch,ownProps)函数类型主要用于触发action 用 connect 方法 让组件 与 store 关联 在 组件 A 和 组件 B 中分别导入 connect 方法利用 connect 方法对组件进行加强并导出 import { connect } from react-reduxconnect(mapStateToProps,mapDispatchToProps) (CpmponentA)//例如 组件A 是发送方class ComA extends React.Component{handleClick () {this.props.sendAction()}render(){return button onClick{this.handleClick} /button}}
const mapDispatchToProps dispatch {return {sendAction: () {dispatch({type: add_action})}}
}
export default connect(null,mapDispatchToProps) (ComA)
//例如 组件B 是接收方class ComB extends React.Component{render(){return div{this.props.count} /div}}
const mapStateToProps state {return state}
}
export default connect(mapStateToProps) (ComB)react-redux 原理图
