2018年基于社区定制统　可维护的前端架构.pdf

1、基于社区定制统一可维护的前端架构状态管理The essential of modern frontend architecture is state managementRedux一致性资源管理泛式化使用唯一的资源池管理所有实体后端是唯一的资源数据来源绝大多数资源来自于HTTP请求的响应整体API偏向RESTful风格可直接将响应与Store进行整合 entities:posts:123:.,456:.,index:posts:123,456 ,reading:postId:456 UIStoreRequestBackendResponseThunk?ActionReducer?https:/

2、 keyBy from lodash/fp;import withTableUpdate from./fetch;const listItems=params=get(/items,params);export const fetchItems=withTableUpdate(keyBy(id),items)(listItems);const items=await fetchItems();id:123,.,id:456,.store:entities:items:123:.,456:.基于API规范自动泛式化$entry:entity:card,key:123,entity:card,ke

3、y:456$entities:card:123:id:123,space:$ref:entity:space,key:ee-fe ,456:id:456,space:$ref:entity:space,key:ee-fe ,spaces:ee-fe:name:EE-FE,members:$ref:entity:user,key:hanzhixing,$ref:entity:user,key:zhanglili01 ,user:.HTTP/1.1 200 OKX-Total-Count:3243有序性有效性乱序的解决文案不提供并发异步所有任务串行，严重损害性能异步有序完成使用异步管理器，需要复杂

4、的依赖图结构管理异步完成后校验状态根据场景编码实现，无效的结果丢弃浪费移除状态共享不同输入的异步结果相互隔离，消耗少量额外内存多个并行异步过程 异步完成顺序不确定 没有对“异步结果是否可用”的校验 多个过程共享状态定义查询状态标准 postList:keyword=abc,pageIndex:1:params:keyword:abc,pageIndex:1 ,pendingMutex:0,response:arrivedAt:1527501781725,data:/.,error:/.,nextResponse:/Same as response 参数序列化作为索引原始参数运行中的请求数量响应

5、内容请求集响应到达时间响应数据响应异常还未合入的后续响应快速请求Action/actions/posts.jsimport getPostsByQuery from api;import thunkCreatorFor from standard-redux-shape;export const FETCH_POSTS=FETCH_POSTS;export const RECEIVE_POSTS=RECEIVE_POSTS;export const fetchPostsByQuery=thunkCreatorFor(getPostsByQuery,/API请求函数 FETCH_POSTS,/发

6、起请求的Action RECEIVE_POSTS,/请求到达的Action once:true,/只请求一次 trustPending:true,/同一时间仅一个请求在途 selectQuerySet(state)/请求响应的存放位置 return state.queries.postList;);使用策略管理响应/reducers/posts.jsimport acceptLatest from standard-redux-shape;/keepEarliest 只使用最初的响应/maxAge 保留时长import combineReducers from redux;import FET