码迷,mamicode.com
首页 > 其他好文 > 详细

使用react-router+hooks搭建基础框架

时间:2020-07-06 12:31:01      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:基于   lin   大型   create   dispatch   tag   遍历   json   reduce   

前言

最典型的一个react项目就是react-router+redux(可能再加上redux-thunk或saga),在hooks出来之后,redux也同步跟进加了很多hooks,但已经可以完全抛弃redux,仅仅使用useReducer等hooks来管理数据流了(大型、复杂项目的话,目前还是推荐redux)

步骤

前文中已经配置好webpack了,接下来让我们配置react-router以及reducer

react-router

先安装依赖:

npm i -S react-router-dom react-helmet

react-router-dom是基于react-router的库,里面加入了一些在浏览器运行环境下的功能,例如:Link、BrowserRouter、HashRouter。而其他的一些组件则是直接从react-router中导出的,例如:Switch、Route等等。
react-helmet用来动态改变title

路由及布局

路由及布局,就跟我们平时写的react应用是一样的,先写个最简单的就行,就不详细展开了,具体看代码即可,主要新增了3个文件:

  • routes.js 定义路由
  • layout 定义布局
  • RouteWithSubRoutes react-router的嵌套路由组件

插曲

写了几个基础页面后,发现报这种错:

Module not found: Error: Can‘t resolve ‘core-js/modules/es.array.slice‘ 

看了一下package.json,果然,遗漏安装core-js了,因为@babel/preset-env依赖core-js,会跑到当前项目下去寻找core-js
因为用到的是core-js3,所以我们安装core-js3:

npm i core-js@3

redux

接下来就是全局状态管理,以往我们都是用redux及react-redux,不过在有了useReducer和useContext之后,已经可以替代了

在hooks之前createContext配合Context.Consumer也能读取全局状态,只不过很不方便,这篇文章讲的不错

简单来说,使用useReducer和useContext来接管redux,主要有3步,示例代码如下:

  1. createContext创建一个全局context
    js const Store = createContext(initState);

  2. 使用上一步的context,导出Provider组件,value中传入useReducer的state及dispatch

const [state, dispatch] = useReducer(reducer, initState);
return <Store.Provider value={{state, dispatch}}>
</Store.Provider>

接下来就是传统的写法了,dispatch(action()),显然每个页面都这么写的话,还是挺繁琐的
如果能像vue那样mapAction,直接调用action,那就方便多了

redux4中有一个bindActionCreators,跟mapAction作用类似传入action和dispatch,返回一个直接调用的action
而且代码多了之后,肯定是需要拆分reducer及action的,所以我们可以这样进行拆分:

  • 建一个reducers文件夹
  • 一个业务对应一个reducer文件,每个文件里定义actions、reducers
  • 新增一个builder文件,遍历处理,将actions用dispatch包一层,reducers则简单合并,最后导出新的actions、一个新的root reducer

结构如下:

- redux
    - reducers
        - global.ts
        - todo.ts
        - index.ts
    - builder.ts
    - store.tsx
  1. 创建一个useRedux hooks,快捷使用state、dispatch
    const {state, dispatch, actions} = useContext(Store);

更具体的代码就不一行行展示了,在tag-v2中可以详细查看

小结

可以看到,createContext+useContext+useReducer这3个react内置的api,已经足够应对小型项目的全局状态管理了

使用react-router+hooks搭建基础框架

标签:基于   lin   大型   create   dispatch   tag   遍历   json   reduce   

原文地址:https://www.cnblogs.com/thyong/p/13254132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!