new-Xadmin

667 阅读2分钟

github.com/sshwsfc/xad…

纯前端框架,使用React和Redux套餐,保持了xadmin原有的高扩展性和高定制性,可以轻松定制出一整套管理后台。后端数据全部采用API方式获取,您可以定制自己的API Client对接您的后台系统。

redux-saga

redux数据流:


Action 就是一个普通 JavaScript 对象,用来描述发生了什么

Store调用传入的reducer函数。store会把两个参数传入 redux: 当前的 state 树和 action

Reducer 接收先前的 state 和 action,根据action行为,执行相应的逻辑操作,更新并返回新的 state 

Store就是把它们联系到一起的对象。Store 有以下职责:

middleware 只是包装了store的dispatch方法。

你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。

中间件和异步操作

redux + Middleware数据流:


redux-saga管理 Redux 应用异步操作的中间件,middleware 在异步action到达 reducer 前处理它们

  • Reducers 负责处理 action 的 state 更新

  • Sagas 负责协调那些复杂或异步的操作

Sagas是通过ES6中的generator函数和yield关键字来以同步的方式实现异步操作

redux-saga 使用 Effect 诸如 call 和 put,与高阶 API 如 takeEvery 相结合,让我们实现与 redux-thunk 同样的东西, 但又有额外的易于测试的好处。 在「高级」一节,你会遇到一些更强大的 Effect,包括阻塞、非阻塞调用,取消、等待、race等操作方便隔离并执行异步操作,并易于测试让你可以表达更复杂的控制流。