redux-saga

简介: redux-saga

活着就意味着必须做点什么,请好好努力。——《地下》

我们知道React等单页应用在开发时,页面变化依赖于state

随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state(状态)。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等。

管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,依次地,可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候,由于什么原因,如何变化已然不受控制。 当系统变得错综复杂的时候,想重现问题或者添加新功能就会变得举步维艰。

如果这还不够糟糕,考虑一些来自前端开发领域的新需求,如更新调优、服务端渲染、路由跳转前请求数据等等。前端开发者正在经受前所未有的复杂性,难道就这么放弃了吗?当然不是。

这里的复杂性很大程度上来自于:我们总是将两个难以理清的概念混淆在一起:变化和异步。 我称它们为曼妥思和可乐。如果把二者分开,能做的很好,但混到一起,就变得一团糟。一些库如 React 试图在视图层禁止异步和直接操作 DOM 来解决这个问题。美中不足的是,React 依旧把处理 state 中数据的问题留给了你。Redux 就是为了帮你解决这个问题。

因此我们首先得学习Redux,中文官网地址:http://cn.redux.js.org/

此时我们可以很好的在大型项目中管理我们的state了,但如果我们要异步获取数据、访问浏览器缓存等操作,就需要用到Redux-Saga

官网地址(英文):https://redux-saga.js.org/

中文文档地址:https://redux-saga-in-chinese.js.org/

我简单进行入门了一下,编写了一个redux-sagagetting start demo

https://gitee.com/VampireAchao/simple-redux-saga.git

注释都写得比较完善

运行方式:

Setup

cnpm install

Run the demo

npm start
相关文章
|
2月前
|
存储 JavaScript 前端开发
Redux原理
【10月更文挑战第26天】Redux通过单一数据源、只读状态、纯函数修改状态等核心概念,以及清晰的工作流程和中间件机制,为JavaScript应用程序提供了一种强大而可预测的状态管理方案。它与React等视图库的结合能够有效地实现数据驱动的视图更新,提高应用程序的可维护性和可扩展性。在实际应用中,根据项目的具体需求和复杂度,可以灵活地运用Redux及其相关的工具和技术,来构建高效、稳定的前端应用。
92 33
|
5月前
|
JavaScript 中间件
Redux 中 Sagas 的概念
【8月更文挑战第31天】
50 0
|
8月前
|
存储 JavaScript 前端开发
了解 redux 么,说一下 redux 吧
了解 redux 么,说一下 redux 吧
75 0
|
8月前
|
资源调度 JavaScript 前端开发
Redux 异步解决方案2. Redux-Saga中间件
Redux 异步解决方案2. Redux-Saga中间件
34 0
|
8月前
|
资源调度 JavaScript 前端开发
Redux异步解决方案 1. Redux-Thunk中间件
Redux异步解决方案 1. Redux-Thunk中间件
54 0
|
存储 JavaScript 中间件
React-Redux-Saga
React-Redux-Saga
39 0
|
JavaScript 中间件 Python
React-Redux-Saga实现原理
React-Redux-Saga实现原理
73 0
|
JavaScript 中间件 API
redux原理是什么
redux原理是什么
102 0
|
存储 JavaScript 前端开发
React-saga
React-saga
76 0
|
JavaScript 前端开发 中间件
Redux 原理探索
Redux 是一个非常不错的状态管理库,和 Vuex 不同的是 Redux 并不和 React 强绑定,你甚至可以在 Vue 中使用 Redux。当初的目标是创建一个状态管理库,来提供最简化 API。
128 0