当前位置: 首页 > Web前端 > HTML5

react开发教程(10)redux结合react

时间:2023-04-05 23:17:18 HTML5

描述redux和react没有任何关系。Redux可以与React、Angular甚至纯JS搭配使用。但是Redux更适合和React搭配,因为React允许你以状态的形式来描述界面,而Redux非常擅长控制状态的变化。Redux和React的结合需要使用库redux-react案例说明目录├──README.md├──index.js├──action│└──home.js│└──about.js├───actionType│├──index.js├──reducer│└──home.js│└──about.js│└──index.js└──view└──Home.jsx└──About.jsxActionTypethrows两种类型常量exportconstSET_AGE='SET_AGE'exportconstSET_NAME='SET_NAME'Actioncreateaction//home.jsimport{SET_NAME,SET_AGE}from'../actionType'exportfunctionset_age(age){return{type:SET_AGE,age}}exportfunctionset_name(name){return{type:SET_AGE,name}}//about.js同上,是一个模拟,可以写不同的datareducer规则//reducer/home.jsimport{SET_NAME,SET_AGE}from'../ActionType'constinitialState={name:'刘宇',age:100}exportdefault(state=initialState,action)=>{switch(action.type){caseSET_NAME:returnObject.assign({},state,{name:action.name})caseSET_AGE:returnObject.assign({},state,{age:action.age})默认值:returnstate}}//reducer/about.js可以像上面这样自定义home,about})viewbindActionCreators:将actioncreators转换为同名key的对象,但是用dispatch包围每个actioncreator,这样就可以直接调用了connect:连接React组件和Reduxstore。importReact,{Component}from'react';import*aspageActionsfrom'../../action'import{bindActionCreators}from'redux'import{connect}from'react-redux'classInboxextendsComponent{constructor(props){super(props)console.log(this.props)}render(){return(index

)}}functionmapStateToProps(state){return{pageState:状态。home}}functionmapDispatchToProps(dispatch){return{pageActions:bindActionCreators(pageActions,dispatch)}}exportdefaultconnect(mapStateToProps,mapDispatchToProps)(Inbox)//导出默认收件箱;index.js结合了react和reduxcreateStore:创建一个Reduxstore来存储应用程序中的所有状态。应用程序中应该只有一个商店。:是ReactRedux提供的一个高级组件,它允许你将Redux绑定到React,这样所有的容器组件都可以访问store而无需显式传递。它只需要在渲染根组件时使用。从'react'导入React;从'react-dom'导入ReactDOM;从'redux'导入{createStore}从'react-router-dom'导入{Provider}from'react-redux'importHomefrom'./view/Inbox'importAboutfrom'./view/About'importrootReducerfrom'./Reducer'//创建storeconststore=createStore(rootReducer)constBasicExample=()=>(
)ReactDOM.render(
,document.getElementById('root'));上一篇:react开发教程(九)redux基础