基于Redux架构的单页应用开发总结（三）

最新推荐文章于 2025-04-18 08:00:00 发布
原创 最新推荐文章于 2025-04-18 08:00:00 发布 · 2.7k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
web前端

当前文章被收录于：

web前端
84 篇文章 1 人学习
订阅专栏 查看详情
js

当前文章被收录于：

js
39 篇文章 0 人学习
订阅专栏 查看详情
react

当前文章被收录于：

react
21 篇文章 0 人学习
订阅专栏 查看详情

写在前面

这篇具体讲讲Redux使用的一些技巧

React式编程思维

在没有遁入React之前，我是一个DOM操作控，不论是jQuery还是zepto，我在页面交互的实现上用的最多的就是DOM操作，把复杂的交互一步一步通过选择器和事件委托绑定到document上，然后逐个连贯起来。

$(document).on('event', 'element', function(e){
    e.preventDefault();
    var that = this;
    var parent = $(this).parent();
    var siblings = $(this).siblings();
    var children = $(this).children();
    // .....
});

这是jQuery式的编程思维，React和它截然不同。React的设计是基于组件化的，每个组件通过生命周期维护统一的state，state改变，组件便update，重新触发render，即重新渲染页面。而这个过程操作的其实是内存里的虚拟DOM，而不是真正的DOM节点，加上其内部的差异更新算法，所以性能上比传统的DOM操作要好。

举个简单的例子：

现在要实现一个模态组件，如果用jQuery式的编程思维，很习惯这么写：

/**
 * @desc 全局模态窗口
 **/
var $ = window.$;
var modal = {
    confirm: function(opts) {
        var title = opts.title || '提示',
            content = opts.content || '提示内容',
            callback = opts.callback;
        var newNode = [
            '<div class="mask" id="J_mask">',
                '<div class="modal-box">',
                    '<h2>',
                        title,
                    '</h2>',
                    '<p>',
                        content,
                    '</p>',
                    '<div class="mask-btns">',
                        '<span id="J_cancel">取消</span>',
                        '<span id="J_confirm">确定</span>',
                    '</div>',
                '</div>',
            '</div>',
        ].join('');
        $('#J_mask').remove();
        $('body').append(newNode);

        $('#J_cancel').on('click', function() {
            $('#J_mask').remove();
        });

        $('#J_confirm').on('click', function() {
            if (typeof callback === 'function') {
                callback();
            }
            $('#J_mask').remove();
        });
    }
};
module.exports = modal;

然后在页面的JavaScript里通过选择器触发模态和传递参数。

var Modal = require('modal');
var $ = window.$;
var app = (function() {
    var init = function() {
        eventBind();
    };
    var eventBind = function() {
        $(document).on('click', '#btnShowModal', function() {
            Modal.confirm({
                title: '提示',
                content: '你好！世界',
                callback: function() {
                    console.log('Hello World');
                }
            });
        });
    };
    init();
})();

如果采用React式的编程思维，它应该是这样的：

/**
 * @desc 全局模态组件 Component
 * @author Jafeney
 * @createDate 2016-05-17
 * */
import React, { Component } from 'react'
import './index.less'

class Modal extends Component {
    constructor() {
        super()
        this.state = {
            jsMask: 'mask hidden'
        }
    }
    show() {
        this.setState({
            jsMask: 'mask'
        })
    }
    close() {
        this.setState({
            jsMask: 'mask hidden'
        })
    }
    confirm() {
        this.props.onConfirm && this.props.onConfirm()
    }
     render() {
         return (
             <div className={this.state.jsMask}>
                <div className="modal-box" style={this.props.style}>
                    <div className="header">
                        <h3>{ this.props.title }</h3>
                        <span className="icon-remove closed-mask" onClick={()=>this.close()}></span>
                    </div>
                    <div className="content">
                        { this.props.children }
                    </div>
                    <div className="mask-btns">
                        <span className="btn-full-danger" onClick={()=>this.confirm()}>{ this.props.confirmText || '确定' }</span>
                        { this.props.showCancel && (<span className="btn-border-danger" onClick={()=>this.close()}>取消</span>) }
                    </div>
                </div>
             </div>
         );
     }
}
export default Modal

然后在container的render()函数里通过标签的方式引入，并通过点击触发。

import {React, component} from 'react'; 
import Modal from 'Modal';

class App extends Component {
    render() {
       <div>
            <button onClick = {()=> {this.refs.modal.show()}}
            <Modal title={"提示"} 
                   style={{width: 420, height: 200}}
                   ref={(ref)=> this.modal = ref} 
                   onConfirm={()=>this.onModalConfirm()}>
                   <p className="tips">Hello world!</p>
            </Modal>
       </div>
    }
}

export default App

你会发现，上面的代码并没有刻意地操作某个DOM元素的样式，而是通过改变组件的state去触发自身的渲染函数。换句话说，我们不需要写繁琐的DOM操作，而是靠改变组件的state控制组件的交互和各种变化。这种思维方式的好处等你熟悉React之后自然会明白，可以大大地减少后期的代码量。

优化渲染

前面提到组件的state改变即触发render()，React内部虽然做了一些算法上的优化，但是我们可以结合Immutable做进一步的渲染优化，让页面更新渲染速度变得更快。

/**
 * @desc PureRender 优化渲染
 **/

import React, { Component } from 'react'
import Immutable from 'immutable';

export default {
    // 深度比较
    deepCompare: (self, nextProps, nextState) => {
        return !Immutable.is(self.props, nextProps) || !Immutable.is(self.state, nextState)
     },
    // 阻止没必要的渲染
    loadDetection: (reducers=[])=> {
        for (let r of reducers) {
            if (!r.get('preload')) return (<div />)
        }
    }
}

这样我们在container的render()函数里就可以调用它进行渲染优化

import React, { Component } from 'react'
import PureRenderMixin from '../../mixins/PureRender';

class App extends Component { 
    render() {
        let { actions, account, accountLogs, bankBind } = this.props；
        // 数据导入检测
        let error = PureRenderMixin.loadDetection([account, accountLogs, bankBind])
        // 如果和上次没有差异就阻止组件重新渲染
        if (error) return error   
        return (
            <div>
                // something ...
            </div>
        );
    }
}

全局模块的处理

其实Redux最大的作用就是有效减少代码量，把繁琐的操作通过 action ----> reducer ----> store 进行抽象，最后维护统一的state。对于页面的全局模块，简单地封装成mixin来调用还是不够的，比如全局的request模块，下面介绍如何用Redux进行改造。

首先在types.js里进行声明：

// request
export const REQUEST_PEDDING = 'REQUEST_PEDDING';
export const REQUEST_DONE = 'REQUEST_DONE';
export const REQUEST_ERROR = 'REQUEST_ERROR';
export const REQUEST_CLEAN = 'REQUEST_CLEAN';
export const REQUEST_SUCCESS = 'REQUEST_SUCCESS';

然后编写action:

/**
 * @desc 网络请求模块的actions
 **/

// fetch 需要使用 Promise 的 polyfill
import {
  pendingTask, // The action key for modifying loading state
  begin, // The action value if a "long" running task begun
  end // The action value if a "long" running task ended
} from 'react-redux-spinner';
import 'babel-polyfill'
import fetch from 'isomorphic-fetch'
import Immutable from 'immutable'
import * as CONFIG from './config';   //请求的配置文件
import * as TYPES from './types';

export function request(route, params, dispatch, success=null, error=null, { method='GET', headers={}, body=null } = {}) {
  dispatch({type: TYPES.REQUEST_PEDDING, [ pendingTask ]: begin})
  // 处理query
  const p = params ? '?' + Object.entries(params).map( (i)=> `${i[0]}=${encodeURI(i[1])}` ).join('&') : ''
  const uri = `${ CONFIG.API_URI }${ route }${ p }`
  let data = {method: method, headers: headers}
  if (method!='GET') data.body = body
  fetch(uri, data)
    .then((response) => {
      dispatch({type: TYPES.REQUEST_DONE, [ pendingTask ]: end})
      return response.json()
    })
    .then((data) => {
      if (String(data.code) == '0') {
        if (method !== 'GET' ) dispatch({type: TYPES.REQUEST_SUCCESS});
        success && success(data);
      } else {
        console.log(data.error)
        dispatch({type: TYPES.REQUEST_ERROR, ...data})
        error && error(data)
      }
    })
    .catch((error) => {
        console.warn(error)
    })
}

export function requestClean() {
  return { type: TYPES.REQUEST_CLEAN }
}

然后编写对应的reducer操作state：

import Immutable from 'immutable';
import * as TYPES from '../actions/types';
import { createReducer } from 'redux-immutablejs'

export default createReducer(Immutable.fromJS({status: null, error: null}), {
  [TYPES.REQUEST_ERROR]: (state, action) => {
    return state.merge({
        status: 'error',
        code: action.code,
        error: Immutable.fromJS(action.error),
    })
  },
  [TYPES.REQUEST_CLEAN]: (state, action) => {
    return state.merge({
        status: null,
        error: null,
    })
  },
  [TYPES.REQUEST_SUCCESS]: (state, action) => {
    return state.merge({
        status: 'success',
        error: null,
    })
  }
})

然后在reducers的index.js里对外暴露接口

export request from './request'

为什么要做这一步呢？因为我们需要在configureStore.js里利用combineReducers对所有的reducer进行进一步的结合处理：

import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import * as reducers from './reducers'
import { routerReducer, routerMiddleware } from 'react-router-redux'
import { pendingTasksReducer } from 'react-redux-spinner'

export default function configureStore(history, initialState) {
  const reducer = combineReducers({
    ...reducers,
    routing: routerReducer,
    pendingTasks: pendingTasksReducer,
  })
  const store = createStore(
    reducer,
    initialState,
    compose(
      applyMiddleware(
        thunkMiddleware,
        routerMiddleware(history) 
      )
    )
  )
  return store
}

接下来就可以在container里使用了，比如登录模块：

/**
 * @desc 登录模块 container
 * @createDate 2016-05-16
 * @author Jafeney<692270687@qq.com>
 **/
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { replace } from 'react-router-redux'
import { login } from '../../actions/user'
import { requestClean } from '../../actions/request'
import CheckUserMixin from '../../mixins/CheckUser'
import PureRenderMixin from '../../mixins/PureRender'
import '../style.less';

class Login extends Component {
    constructor() {
        super()
    }
    shouldComponentUpdate(nextProps, nextState) {
        // 如果已经登录不触发深度比较
        if (nextProps.user.getIn(['login', 'status'])=='logged') {
            this.toMain()
            return true
        }
        return PureRenderMixin.deepCompare(this, nextProps, nextState)
    }
    // 检查登录态
    componentDidMount() {
        let { user } = this.props;
        if (CheckUserMixin.isLogged(user)) this.toMain()
    }
    // 初始化页面
    toMain() {
        this.props.actions.replace('/')
        this.props.actions.requestClean()
    }
    // 执行登录
    login() {
        const userName = this.refs['J_username'].value, password = this.refs['J_password'].value
        if (userName && password) {
            this.props.actions.login({username: userName, password: password})
        }
    }
    // 绑定回车事件
    onEnter(event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==13) { // enter 键
             this.login()
        }
    }
    render() {
        let { user } = this.props
        return (
            <div className="wrapper" onKeyPress={()=>this.onEnter()}>
                <div className="containers">
                    <div className="logo"></div>
                    <div className="content">
                        <div className="header">会员登录</div>
                        <div className="mainer">
                            <div className="input-group">
                                <input ref="J_username" type="text" placeholder="手机号码" className="input" />
                                <label className="check-info" ref="J_username-check"></label>
                            </div>
                            <div className="input-group">
                                <input ref="J_password" type="password" placeholder="登录密码" className="input" />
                                <label className="check-info" ref="J_password-check"></label>
                            </div>
                            <div className="input-group">
                                <span ref="J_login" onClick={()=>this.login()} className="login-btn">登录</span>
                                <span className="login-info">
                                    <a ref="J_register" href="#/register" className="register">免费注册</a> |
                                    <a ref="J_forget" href="#/password" className="forget">忘记密码 ?</a>
                                </span>
                            </div>
                            <div className="form-error">
                                { user.getIn(['login', 'error', 'message']) }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

// 下面是redux的核心方法
function mapStateToProps(state) {
    return {
        user: state.user
    }
}
function mapDispatchToProps(dispatch) {
    return { actions: bindActionCreators({ login, requestClean, replace }, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)

注意：通过以上方式，在组件内部actions里挂载的方法就可以通过this.props取得了。

标签
#jquery #架构 #应用 #函数 #编程
十三）React项目实战记录：react-redux封装
jimson_zhu的博客
01-16 662
react-redux封装步骤如下。可以先安装redux-thunk。其余的类似，代码分别如下。
React和Redux技术结合打造单页应用
AI天才研究院
08-06 948
2015年，Facebook推出React项目，打破了开发界的界限，鼓励组件化开发，促进了前端工程师和前端社区的创新。同年，Redux出现，将状态管理工具集成到前端，赋予了前端更强大的能力。React Redux是一个结合了React和Redux的全栈框架，可以帮助开发者快速构建具有复杂交互和动态UI特性的web应用。在本文中，我将详细介绍React Redux的基本原理及其与传统前端MVC模式的区别，并通过实际案例分析如何使用React Redux构建一个完整的单页应用。
redux的封装使用
weixin_53296485的博客
06-29 341
redux封装与使用
GhidraMCP：AI驱动的逆向工程革命——让LLM自主操作Ghidra进行自动化分析
这里汇聚了前沿的技术分享与实用的开发技巧，带你探索从创意到企业的技术创业之路。
04-14 2067
（Ghidra Machine Control Protocol）应运而生，它通过将LLM与Ghidra（美国NSA开源逆向工具）结合，实现了AI驱动的自动化逆向工程流程。逆向工程是软件安全、漏洞分析和代码审计的核心环节，但传统方法依赖人工分析，耗时且易出错。未来，随着LLM技术的演进和逆向工程工具的优化，GhidraMCP有望成为安全研究人员和开发者的核心工具，推动逆向工程进入“AI辅助时代”。GhidraMCP通过LLM与Ghidra的深度整合，重新定义了逆向工程的自动化边界。
Redux
qq_43174356的博客
04-24 192
1，安装yarn redux后再安装 yarn add react-redux 2，connect （mapStateToProps，mapDispatchToProps）（组件名） mapStateToProps指的是connect组件和store做链接时，如何将store的数据映射到Props上面， ...
【React】Redux的使用详解
m0_68324632的博客
01-17 7331
Redux就是一个帮助我们管理State的容器：Redux是JavaScript的状态容器，提供了可预测的状态管理
【React】redux状态管理、react-redux状态管理高级封装模块化
m0_61049675的博客
02-04 1898
redux是一个JavaScript容器，用于进行全局的状态管理；redux三大核心；单一数据源头：所有state都会被挂载到一个叫Object tree中,Object tree又只存在唯一的Store(理解为容器，存储Object tree，Object tree挂在state)中；State是只读的：唯一改变state的方法就是触发action，触发action，store.dispatch ( {type: '字符串' , val: 1})，val自定义使用纯函数来执行修改：编写。
基于Redux架构的单页应用开发总结（二）
思诚^_^
06-11 8439
写在前面 这次重点介绍基于Redux架构的单页应用代码的组织方式 关于less的组织作为一个后端出身的前端工程师，写简单的css实在没有那种代码可配置和结构化的快感。所以引入less是个不错的选择，无论是针对代码后期的管理，还是提高代码的复用能力。global.less这个是全局都可以调用的方法库，我习惯把 项目的配色、各种字号、用于引入混出的方法等写在这里，其他container页面通过@im
基于Redux架构的单页应用开发总结（一）
思诚^_^
06-07 2756
写在前面 “大学四年，细细回味。大一，面带稚嫩的面庞，一腔傻傻的热情。可爱帅气的小涵妹，带我认识时尚，好基友终生难忘。大二，踏上程序员之旅，曦点无缘，Smart不弃，恩师点拨学长提携，滴水之恩涌泉报。大三，有了自己的团队，乐雁老朱，编程游戏我们都在一起。项目经验，点点积累，低下小中探寻的是学以致用的真理。大四，杭州漂泊的一年，八爱到贝贝，小公司磨练，大公司学习，前端工程师之路，勇往直行！
241.Redux架构
2303_79132118的博客
03-26 1331
Redux 最初起源于 JavaScript 世界，用于解决前端应用状态管理问题，其核心思想是将整个应用的状态存储在一个全局的、只读的“Store”中，通过分发（dispatch）动作（Action）来更新状态，最终通过纯函数（Reducer）计算得出新的状态。Redux 强调“单一数据源”、“状态不可变”和“使用纯函数更新状态”这三个基本原则，因而具有可预测、可测试、可调试等显著特点。在 Android 开发中，尤其使用 Kotlin 语言，我们也可以应用 Redux 架构的思想。
React之Redux
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
09-04 1073
React之Redux
React 之 Redux =》 理解+应用
m0_51244077的博客
12-28 1908
React 之 Redux =》 理解+应用
探索动态Redux：redux-dynostore项目推荐
gitblog_00268的博客
08-30 764
探索动态Redux：redux-dynostore项目推荐 在现代前端开发中，Redux作为状态管理工具的重要性不言而喻。然而，随着应用规模的扩大，传统的Redux架构可能会显得力不从心。今天，我们将介绍一个强大的开源项目——redux-dynostore，它为Redux带来了动态性和灵活性，使得构建大型应用变得更加高效和便捷。 项目介绍 redux-dynostore是一个旨在增强Redux动态...
Redux三大核心介绍及拓展
isfor_hhj的博客
08-01 1253
什么是Redux？ Redux是JavaScript状态容器，提供可预测化的状态管理 Redux是由flux演化而来 Redux最主要的应用是用作应用状态的管理 Redux三大核心主要是action、reducer、store 1. action 定义：Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch(...
redux和combineReducers的封装
学思QAQ的博客
07-31 225
redux和combineReducers的封装并使用
Redux 的使用和模块化封装
最新发布
你若盛开，清风自来
04-18 884
);
【Redux】的封装以及使用（6）
weixin_49174517的博客
11-23 734
市面上有redux- saga ， redux-thunk，redux-thunk相比于redux-saga ，体积小，灵活，但需要自己手动抽取和封装。导入 applyMiddleware、compose 方法将仓库数据、reduxTools、reduxThunk 进行关联。执行回调中传递的参数，根据 tyep 标记去匹配需要执行的方法。让 redux 调式工具兼容异步。方法传递一个执行异步的回调。## 一、 基本配置。
Redux数据流架构
a3337779的博客
04-28 1787
Redux的难点是理解它对于数据修改的规则, 下图动态展示了在整个数据的修改中，数据的流向。
redux-immutable统一数据格式
limingxiaojie的博客
07-10 326
一、使用命令安装 npm install redux-immutable --save 二、之前在header的reducer.js里把header变成immutable对象之后，在组件里获取focused属性就得这样获取： focused:state.header.get('focused') state是一个js对象，state.header是一个immutable对象，所以调用...
redux实现单页应用状态管理（1）
qq_54998648的博客
01-27 178
redux实现状态管理
HKSI PAPER1香港证券期货从业考试温习手册卷一.pdf
HKSI PAPER1香港证券期货从业考试温习手册卷一.pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值