手写React-Redux核心原理,再也不怕面试官问我React-Redux原理

运维 数据库运维
当一个react项目组件层级越来越深,页面越来越多的时候,数据在各个组件层级和页面之间传递的需求就会比较多,很多变量也需要做成可全局管理的。在这个时候,redux和react-redux的使用就很有必要了。它们能帮助我们很方便的进行项目全局性的数据管理。

[[347940]]

下面,就写一下我自己对 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]()来实现的。它大致的核心代码如下:

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.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

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 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.

二、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 
        }) 
    } 

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

第二步,编写改变用户信息并返回新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 
    } 
 

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.

第三步,完成store的创建

import {createStore} from 'redux' 
import reducers from '../reducers/index' 
 
let store = createStore(reducers) 
 
export default store 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

第四步,获取用户信息

//配置代码,通过connect将组件和store连接起来 
let mapStateToProps = (state) => ({ 
    userInfo: {...state.redUserInfo} 
}) 
 
let mapDispatchToProps = (dispatch) => ({}) 
 
export default connect(mapStateToProps, mapDispatchToProps)(PageClass) 
 
//通过props获取用户信息 
this.props.userInfo 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

第五步,修改用户信息

import {switchUser} from '../../redux/actions/userInfo' 
 
switchUser({ 
    userId: 10001, 
    userName: ''
    userOpenid: ''
    userPhone: ''
    userRole: 2 
})(); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

至此就完成了redux+React-redux的一个简单使用流程

 

责任编辑:姜华 来源: 前端阳光
相关推荐

2020-11-24 07:48:32

React

2021-08-10 18:36:02

Express原理面试

2020-10-20 09:12:57

axios核心原理

2022-08-27 13:49:36

ES7promiseresolve

2025-03-05 00:00:00

state变更组件

2025-03-05 00:00:00

ReactstoreUI 更新

2021-05-08 07:53:33

面试线程池系统

2022-04-01 07:52:42

JavaScript防抖节流

2021-07-26 09:00:08

ReactHooks 项目

2022-10-31 11:10:49

Javavolatile变量

2019-09-23 19:30:27

reduxreact.js前端

2023-11-28 17:49:51

watch​computed​性能

2025-03-05 00:01:00

ReduxReact

2020-07-03 17:20:07

Redux前端代码

2020-10-15 12:52:46

SpringbootJava编程语言

2023-05-11 07:25:57

ReduxMiddleware函数

2024-09-25 12:26:14

2024-04-22 09:12:39

Redux开源React

2020-12-18 05:42:46

reduxactions

2015-08-18 08:55:03

redux核心
点赞
收藏

51CTO技术栈公众号