redux沉思录:基于flux、状态管理、函数式编程的前端状态管理框架

时间:2023-03-09 20:33:45
redux沉思录:基于flux、状态管理、函数式编程的前端状态管理框架

基于flux和reduce的通信和状态管理机制;

和数据库管理系统一样,redux是一个状态管理系统(或机制)。

const store = createStore(

reducer,

compose(

applyMiddleware(thunk),

DevTools.instrument()

)

)

一、redux模型

两个组件(端点):

UI(事件源);

store;

二、store的组成:

Middleware:切面编程

dispatch:UIstore的通信机制;

state:应用需要统一维护的状态,可以通过createStore(reducer, initialState) 和reducer缺省参量进行赋值,表现形式通常为map;

reducer:操作处理和状态更新函数;对于状态的更新采用copy-in  copy-out的机制;

update机制:store到UI的订阅、发布通信机制;

三:通信报文:

action;

四、reducer

使用(函数式编程的)纯函数的形式,根据action信息对state进行copy-in  copy-out的更新;

reducer作为信息解析和处理机制(表示层),在store创建时完成注册;

可以通过combineReducers将部分状态的reducer函数合并成一个整体的reducer进行注册;

五、compose middleware

利用函数式编程的compose操作,将多个中间件组合为一个;

需要合成的多个函数。预计每个函数都接收一个参数。它的返回值将作为一个参数提供给它左边的函数。

六、与flux的区别:

1、状态的状态管理;

2、将接受端的表示层解析为多个reducer纯函数;

七、

Redux API

整个 Redux API 很简单,仅包含 5 个*函数(您已经知道其中一个函数 Redux.createStore()):

  • Object createStore(reducer, initialState) - 创建 Redux 存储。
  • Object combineReducers(reducers) - 将多个缩减程序组合为一个。
  • Object compose(...functions) - 从左向右构造函数。
  • void applyMiddleware(...middlewares) - 应用 Redux 中间件。
  • Object bindActionCreators(actionCreators, dispatch) - 将多个操作创建器绑定到分派函数。

回想一下,Redux 维护着单一缩减程序的引用,该缩减程序负责计算应用程序的整体状态。但在复杂应用程序中维护单个缩减程序函数可能不太实用,尤其是在开发团队协同工作时。顾名思义,combineReducers() 函数将多个缩减程序函数组合为一个。然后,您可以控制缩减程序函数的精细水平,各个开发人员可以独立处理这些函数。

借助 Redux applyMiddleware() 函数,可以通过拦截分派调用的中间件来扩展 Redux。这个方便的工具使实现各种各样的横切关注点成为可能,从日志记录到异步操作。

https://www.ibm.com/developerworks/cn/web/wa-manage-state-with-redux-p1-david-geary/?mhq=使用%20Redux%20管理状态