如何让redux actions reducers 按需加载！

最新推荐文章于 2022-10-18 04:07:36 发布

weixin_33972649

最新推荐文章于 2022-10-18 04:07:36 发布

阅读量168

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000004208046

版权

背景

最近项目中用了react-router。把业务拆分了很多模块，比如ABCD...模块，react-router 可以在需要的适合做到按需加载这些业务代码。
数据流采用redux，actions和reducers有统一的处理，也有各业务模块的的actions和reducers。

but，你会发现，actions和reducers需要在一开始就定义好。也就是说A业务的actions/reducers做不到按需加载啦，即使用户可能压根就没有访问到A业务。假设你的actions和reducers很复杂，那你的js文件就很大。

网上找了下，貌似没有相关的信息和现成的解决方案。所以才有了 redux-async-actions-reducers

具体用法和demo 见 redux-async-actions-reducers-demo

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33972649

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

redux-dynamic-modules：通过动态加载reducers和中间件来模块化Redux

02-05

Redux动态模块它是什么？ redux-dynamic-modules是一个旨在使Redux Reducer和中间件易于模块化和动态添加/删除的库。动机在大型Javascript应用程序中，通常需要执行某种代码拆分，以使初始脚本大小较小。但是，在Redux中，您需要预先定义reducers和中间件。没有很好的方法在运行时动态添加/删除这些构造。 redux-dynamic-modules旨在使动态加载这些结构更加容易。您可以定义一个模块，其中包含reducer和中间件，然后在运行时将其添加到Redux存储中。我们还提供了一个React组件DynamicModuleLoade

快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）

weixin_30809173的博客

03-01

138

一、前言最近整理了一下项目骨架，顺便自定义了一个脚手架，方便日后使用。我会从头开始，步骤一步步写明白，如果还有不清楚的可以评论区留言。先大致介绍一下这个骨架，我们采用create-react-app 搭建基础骨架，修改一些基础配置；使用webpack的import模块实现按需加载(俗称切片打包)；引入 react-redux；引入axios；规划好项目的目录结构。我们大...

参与评论您还未登录，请先登录后发表或查看评论

React 和 Redux 的动态导入

w13707470416的博客

03-25

461

代码分离与动态导入对于大型 Web应用程序，代码组织非常重要。它有助于创建高性能且易于理解的代码。最简单的策略之一就是代码分离。使用像 Webpack 这样的工具，可以将代码拆分成更小的部分，它们分为两个不同的策略，静态和动态。通过静态代码分离，首先将应用程序的每个不同部分作为给定的入口点。这允许 Webpack 在构建时将每个入口点拆分为单独的包。如果我们知道我们的应用程序的哪些部...

react结合redux和react-router开发大型应用实现按需加载（code splitting）

小楼一夜听春雨

10-27

4540

— 2017-11-27更新我见过有人将公共部分提取出来，其实没有必要，经过code-splitting之后，子级引用的组件在父级已经引用了那么子级不会再引入该组件，也就是去重，这就是webpack中自带的plugin：CommonsChunkPlugin作用，如果你把代码提取出来，结果首屏加载大概是这样子：先加载common.js然后加载app.js，请求两次，而这两个合成一个便只要请求一次

（路由按需加载）react论坛提问回复功能基本实现例子（react+redux）最终版

02-05

1.例子查看及说明文章：http://blog.csdn.net/dknightl/article/details/79168962。 2.路由按需加载文章：http://blog.csdn.net/dknightl/article/details/79261867 一。用npm install 可以下载安装package.json中的模块。运行时如果一直在map to regist,可以尝试换镜像。二。npm run server 可以开户站点。

redux Reducer

qq_45429539的博客

03-03

271

Reducer Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的设计 State 结构以 todo 应用为例，需要保存两种不同的数据：当前选中的任务过滤条件；完整的任务列表。 { visibilityFilter: 'SHOW_ALL', todos: [ { text: 'Consider using Redux', completed: true, }, { text: 'Keep all

react-typescript的一些简单使用，引入antd、redux，按需加载

mackJun的博客

08-16

3446

react脚手架typescript版本整合redux、antd按需加载的简单使用(如有侵权，请联系我) 1.下载create-react-app cnpm i create-react-app -g //全局下载react脚手架,mac用户加上sudo 2.创建react项目(注意：进入启动测试一下项目是否能正常运行) create-react-app ts-react-study --typ...

深入理解redux之reducer为什么是纯函数

weixin_34056162的博客

05-12

3553

reducer是redux的三个核心概念之一，它指定了应用状态的变化如何响应 actions 并发送到 store，需要由开发人员自己定义，提起reducer，最常想到的一个准则是reducer要是纯函数，那么这其中是什么原因呢，如果不是纯函数的话会导致redux不可用吗？接下来就来一步步分析下这个问题 reducer响应actions的原理我们定义的reducer负责接收action，并返...

webpack4.0+react16+redux-actions

01-02

它支持按需加载和代码分割，优化应用程序的性能。在React 16中，Webpack 4.0 作为前端构建工具，能够帮助开发者有效地管理和构建React应用。 React 16 是Facebook推出的JavaScript库，用于构建用户界面。它引入了 ...

推荐使用并手写实现redux-actions原理

weixin_43964148的博客

12-17

353

文章目录一、前言二、介绍2.1 创建action2.2 reducer2.3 触发action三、认识与手写createAction()3.1 用法3.2 原理实现四、认识handleActions五、认识与手写实现handleAction5.1 用法5.2 原理实现六、handleActions原理实现最后参考文章一、前言为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前的大佬在处理redux的时候引入了它。发现也确实使得在对redux的处理上方便了许多，

redux中reducer的拆分。redux中的combineReducers方法

TangAcrab的博客

11-05

457

根据业务逻辑和页面将reducer进行拆分为多个reducer。最外层reducer将各个分散的reducer进行聚合： 1.引入分散的reducer。 2.从redux中引入combineReducers 方法。 ...

一文读懂Redux，state、Action、Reducers、store的应用

最新发布

ZhShy

10-18

1341

这样使得组件树成为一个大的”view“，任何组件都可以访问state或出发action，无论在什么位置。那个根 reducer 函数负责处理所有被 dispatching 的 actions，并计算每次所有的新 state 结果。通过定义和分离 state 管理中涉及的概念并强制执行维护 view 和 state 之间独立性的规则，代码变得更结构化和易于维护。因此，可以将大的根 reducer 函数拆分为两个较小的 reducer -，并编写一个新的根 reducer，它唯一的工作就是调用其他两个函数。

redux router 组件如何按需加载

沈斯明技术博客

03-07

1489

当页面比较多时，项目就会变得越来越大，尤其对于单页面应用来说，初次渲染的速度就会很慢，这时候就需要按需加载，只有切换到页面的时候才去加载对应的js文件。react配合webpack进行按需加载的方法很简单，Route的component改为getComponent，组件用require.ensure的方式获取，并在webpack中配置chunkFilename。 const chooseProd

react按需加载

weixin_36094484的博客

05-15

8454

以前在博客园记录过react代码分块的实现，不过当时主要是关注“能实现”，没有深入研究。今天复习顺便深入一下。/***引子开始***/初学者在学习react或用react开发小项目时，一般不需要考虑到代码分块，往往在打包的项目中就已经包含全部的state和reducers。至今很多团队开发项目都是用传统的文件组织形式：component(或container)文件夹：存放视图组件或容器组件acti...

React Native之Redux使用详解之Reducers（30）

MN1107

08-28

4349

React Native之Redux使用详解之Reducers一. ReducersActions 描述发生了什么，但不能指定响应中state怎么变化，这是Reducers的工作。1. 设计State Shape在Redux中，所有state存储为一个单一对象。写任何代码之前考虑好它的 Shape是一个好的注意。对于我们的 todo 应用，我们想去存储两种不同事物：当前所选的可见性过滤器 todo

react-redux的使用从action规划到reducer实现及完整案例

Marswill

10-18

6245

网络中介绍redux和react-redux的文章非常非常多我为什么要写这篇文章呢？因为他们都写得不好。好与不好的标准就是对于一个需要学习react redux的人能不能在读完文章后顺利理解和完成可运行案例。由于时间关系和演示项目对文件命名不是很合理，请谅解。 redux作为一个状态管理库其实是独立的。可以在angular，vue，react或者jQuery中使用。当然使用redux你需要遵循一...

React学习笔记_动态注入reducer