React

61次阅读
没有评论

共计 3417 个字符,预计需要花费 9 分钟才能阅读完成。

这篇文章主要介绍“React-Redux 的核心原理是什么”,在日常操作中,相信很多人在 React-Redux 的核心原理是什么问题上存在疑惑,丸趣 TV 小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React-Redux 的核心原理是什么”的疑惑有所帮助!接下来,请跟着丸趣 TV 小编一起来学习吧!

一、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]() 来实现的。它大致的核心代码如下:

import React, {Component} from  react  import {PropTypes} from  prop-types  export default class Provider extends Component { getChildContext() { return {store: this.props.store} } constructor() { super() this.state = {} } render() { return this.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  import React from  react  import {PropTypes} from  prop-types  const connect = (mapStateToProps, mapDispatchToProps) =  (WrappedComponent =  { class Connect extends Component { 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 } return Connect }) export default connect

二、redux 和 React-redux 的使用
项目中关于 redux 的文件夹目录如下

拿管理用户信息数据的需求来举例

第一步,编写操作用户信息的 action

import {USER_INFO} from  ../constants/actionTypes  import store from  ../store/store  export const switchUser = (data) =  { console.log( switchUser() ,data); return () =  { store.dispatch({ type: USER_INFO, ...data }) } }

第二步,编写改变用户信息并返回新 state 的 reducer

import {USER_INFO} from  ../constants/actionTypes  const redUserInfo = (state = { userId: 10001, userName:  , userOpenid:  , userPhone:  , userRole: 0 }, action) =  { if (action === undefined) { return state } switch (action.type) { case USER_INFO: return { ...state, ...action } default: return state } }

第三步,完成 store 的创建

import {createStore} from  redux  import reducers from  ../reducers/index  let store = createStore(reducers) export default store

第四步,获取用户信息

// 配置代码,通过 connect 将组件和 store 连接起来  let mapStateToProps = (state) =  ({ userInfo: {...state.redUserInfo} }) let mapDispatchToProps = (dispatch) =  ({}) export default connect(mapStateToProps, mapDispatchToProps)(PageClass) // 通过 props 获取用户信息  this.props.userInfo

第五步,修改用户信息

import {switchUser} from  ../../redux/actions/userInfo  switchUser({ userId: 10001, userName:  , userOpenid:  , userPhone:  , userRole: 2 })();

到此,关于“React-Redux 的核心原理是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注丸趣 TV 网站,丸趣 TV 小编会继续努力为大家带来更多实用的文章!

正文完
 
丸趣
版权声明:本站原创文章,由 丸趣 2023-07-27发表,共计3417字。
转载说明:除特殊说明外本站除技术相关以外文章皆由网络搜集发布,转载请注明出处。
评论(没有评论)