React-Redux的核心原理是什么
这篇文章主要介绍“React-Redux的核心原理是什么”,在日常操作中,相信很多人在React-Redux的核心原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React-Redux的核心原理是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
一、redux和React-redux的几个重要概念
1.1 action
Action 是把数据从应用(这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
1.2 reducer
Reducers 指定了应用状态的变化如何响应 actions并发送到 store 的,记住 actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。
1.3 store
store就是把action和reducer联系到一起的对象,store本质上是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。
在 Redux 中,所有的数据(比如state)被保存在一个store容器中 ,在一个应用程序中只能有一个store对象。当一个store接收到一个action,它将把这个action代理给相关的reducer。reducer是一个纯函数,它可以查看之前的状态,执行一个action并且返回一个新的状态。
1.4 Provider
Provider 其实就只是一个外层容器,它的作用就是通过配合 connect 来达到跨层级传递数据。使用时只需将Provider定义为整个项目最外层的组件,并设置好store。那么整个项目都可以直接获取这个store。它的原理其实是通过React中的[Context]()来实现的。它大致的核心代码如下:
importReact,{Component}from'react'import{PropTypes}from'prop-types'exportdefaultclassProviderextendsComponent{getChildContext(){return{store:this.props.store}}constructor(){super()this.state={}}render(){returnthis.props.children}}Provider.childContextTypes={store:PropTypes.object}
1.5 connect
connect 的作用是连接React组件与 Redux store,它包在我们的容器组件的外一层,它接收上面 Provider 提供的 store 里面的 state 和 dispatch,传给一个构造函数,返回一个对象,以属性形式传给我们的容器组件。
它共有四个参数mapStateToProps, mapDispatchToProps, mergeProps以及options。
mapStateToProps 的作用是将store里的state(数据源)绑定到指定组件的props中 mapDispatchToProps 的作用是将store里的action(操作数据的方法)绑定到指定组件的props中 另外两个方法一般情况下使用不到,这里就不做介绍。。
那么 connect 是怎么将React组件与 Redux store连接起来的呢?其主要逻辑可以总结成以下代码:
import{Component}from"react";importReactfrom"react";import{PropTypes}from'prop-types'constconnect=(mapStateToProps,mapDispatchToProps)=>(WrappedComponent=>{classConnectextendsComponent{constructor(){super()this.state={}}componentWillMount(){this.unSubscribe=this.context.store.subscribe(()=>{this.setState(mapStateToProps(this.context.store.getState()))})}componentWillUnmount(){this.unSubscribe()}render(){return<WrappedComponent{...this.state}{...mapDispatchToProps(this.context.store.dispatch)}/>}}Connect.contextTypes={store:PropTypes.object}returnConnect})exportdefaultconnect
二、redux和React-redux的使用
项目中关于redux的文件夹目录如下
拿管理用户信息数据的需求来举例
第一步,编写操作用户信息的action
import{USER_INFO}from"../constants/actionTypes";importstorefrom'../store/store'exportconstswitchUser=(data)=>{console.log("switchUser()",data);return()=>{store.dispatch({type:USER_INFO,...data})}}
第二步,编写改变用户信息并返回新state的reducer
import{USER_INFO}from"../constants/actionTypes";constredUserInfo=(state={userId:10001,userName:'',userOpenid:'',userPhone:'',userRole:0},action)=>{if(action===undefined){returnstate}switch(action.type){caseUSER_INFO:return{...state,...action}default:returnstate}}
第三步,完成store的创建
import{createStore}from'redux'importreducersfrom'../reducers/index'letstore=createStore(reducers)exportdefaultstore
第四步,获取用户信息
//配置代码,通过connect将组件和store连接起来letmapStateToProps=(state)=>({userInfo:{...state.redUserInfo}})letmapDispatchToProps=(dispatch)=>({})exportdefaultconnect(mapStateToProps,mapDispatchToProps)(PageClass)//通过props获取用户信息this.props.userInfo
第五步,修改用户信息
import{switchUser}from'../../redux/actions/userInfo'switchUser({userId:10001,userName:'',userOpenid:'',userPhone:'',userRole:2})();
到此,关于“React-Redux的核心原理是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。