szxy00000 / react-quickstart-ts

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

依赖安装:

首先安装yarn 之后执行 yarn 安装好依赖之后 yarn start

架构思路:

整体开发逻辑:

推崇stateless component,所有数据尽量用redux管理,在actions中将逻辑抽象出来,写成纯函数,放在utils中,便于单元测试,同时数据集中管理,出问题只需去看处理数据的纯函数,大幅降低出错风险,便于快速定位问题(大多数bug会出在前端数据逻辑处理上,将这块抽象成纯函数非常必要)

关于页面:
  • 每个页面 仅有路由的页面连接redux,子页面均通过 {...this.props} 的形式传值,保证数据流向单一
  • 页面中的模块,若有复用可能,放在component文件夹中,否则放在页面index.tsx同级
  • 每个页面/模块可以通过 import { {$pageName}Actions } from 'actions/$pageName' 的形式获得action 然后进行dispatch
关于redux:
  • 设计的思路: 开发的时候只需要一边维护action用来发请求,准备数据,一边维护页面view,不需要关心新增types,不需要新增reducer,不需要去总reducer的combine里添加reducer(这块 npm run newpage命令 已经集中处理,将reducer文件名作为页面reducer名),大幅减少开发过程中文件切换工作

  • 每个页面是自己的一个小的store,所以每个页面只需要维护自己的小store,大多数情况只需要一个更新操作来更新这个小store 更新操作如下: updateProps: (payload) => (dispatch) => { return dispatch({ type: UPDATE_template_PROPS, payload: payload, }); }

    对应只需要一个reducer: templateProps: ( state = { demo: 1, }, { payload, type } ) => { if (type !== UPDATE_template_PROPS) return state; return { ...state, ...payload }; },

开发建议:
  • 由component自己生成,并只给自己使用的数据,用 react state 管理,其余全部去store
  • 由于 store 为统一的merge更新操作,要求数据扁平,无法扁平化的数据需要增加reducer(偏平数据能覆盖大于80%的场景)

附带快速新增页面工具:

npm run page $pagename $pagename为要新增页面的名称 运行命令后会生成符合上述逻辑的页面,直接浏览器访问路由 $pagename 即可

About


Languages

Language:TypeScript 70.8%Language:CSS 16.0%Language:JavaScript 6.6%Language:Shell 4.3%Language:HTML 2.3%