Redux + React复杂项目中的依赖选择

  • Z时代
  • 2024-01-10
  • 分类：综合

react

Redux + React复杂项目中的依赖选择

    • 应用场景

    • 中间件的选择，Thunk还是Saga？

    • 安装依赖

      • 必须的

      • 如果使用路由

      • 注意钩子的特殊要求

    • 调试

首先重申一下，我对Redux的定位是客户端数据库。详情可读我上一篇博文：https://mp.csdn.net/postedit/88383902。

应用场景

这里复杂项目的定义：

  • 需要长期维护

  • 会不断增加修改新的部件

  • 多人协作

  • 对客户端轻负担要求高

应用到短期轻量的项目中可能对开发是种负担。

中间件的选择，Thunk还是Saga？

关于Thunk和Saga的比较，这里有篇很棒的文章：https://medium.com/@shoshanarosenfield/redux-thunk-vs-redux-saga-93fe82878b2d。

Saga提供了很多效果方法，thunk则只是将action都包装成了Promise，对新手比较友好。

但就个人使用经验来讲，saga的一长列花样的方法反倒成了使用的阻碍。对于一个长期维护的，文档不够完善的项目来说，bug追溯起来费时费力（通常修的不是自己写的bug，或者很久以后早就忘了为啥这么写）。所以我更偏向于用Thunk，简单直接，并且saga的那些效果也并不难实现。

安装依赖

必须的

使用React和JSX首先要安装：

  • react

  • react-dom(建议跟react同一版本号)

然后加上:

  • redux

  • redux-thunk

  • react-redux

如果使用路由

  • react-router-dom（react-router作为依赖项已经被包含在里面，并且所有方法也一起被输出，所以并不需要额外安装react-router）

  • history(react-router的peerDependency，为更多的环境提供类似HTML5 history API的支持)

  • connected-react-router（可选项，把react-router数据绑定到redux store。注意原先流行的react-router-redux已经被废弃）、

注意钩子的特殊要求

注意如果要使用React重磅推出的钩子，对依赖项版本有如下特殊要求：

"react": "^16.8.0",
"react-dom": "^16.8.0",
"react-redux": "^6.0.1",
"react-router": "^4.4.0-beta.7",
"react-router-dom": "^4.4.0-beta.7",

并且还是有一定几率碰到让人摸不着头脑的bug，对此Github有一长贴：https://github.com/facebook/react/issues/13991#issuecomment-475855107。有空我再说说这个钩子的问题。

调试

在Chrome和Firefox中有一个非常好用的调试插件叫redux-devtools-extension。

可以通过它查看Dispatch的Action顺序和内容：

也可以查看Store的前后变化：

使用它只需要在createStore时作为一个参数传入：

const store = createStore(
     reducer, /* preloadedState, */
     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

如果有应用Redux中间件，如Thunk，则稍微复杂一些：

import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
    reducer, /* preloadedState, */
    composeEnhancers(
    	applyMiddleware(...middleware)
  	)
);

官方Github上有更多详细的介绍：https://github.com/zalmoxisus/redux-devtools-extension

以上是 Redux + React复杂项目中的依赖选择 的全部内容， 来源链接： utcz.com/z/382292.html

回到顶部