你可能不需要Redux


人们总是在自己真的需要redux之前,就选用redux。大家的出发点可能是“就算我现在不需要它,为了项目以后的可扩展性,我还是要用它”。然而之后开发上手写代码了,才发现不便之处:“为什么我实现一个简单的功能就需要加三个文件?”
人们将这些痛苦归咎于Redux,React,函数式编程,不可变性等。产生这种想法挺正常的,因为大家自然而然就会把Redux和其他的不需要“模板”来更新state的方法相对比,从而得出Redux更复杂的结论。从某种程度上说,redux的确就是这样的,它的设计就是这样的。
Redux的确有很多好处,但是它也有很严格的限制:
必须用对象和数组来描述应用state
必须用简单对象来描述系统的变化
必须用纯函数来描述处理变化的逻辑
事实上,不用redux的话,无论用不用react,构建应用程序都不需要遵从这些限制。而这些都是非常严格的限制,所以哪怕只在程序的一部分中用到,也值得仔细考量,真的有充分的理由这么做吗。
对我来说,这些限制很有用——下面这些功能都在这些限制的帮助下构建的:
  • 将state存在本地,从而能关闭页面后再打开时恢复state链接
  • 服务器将state放在html中发送给客户端,从而在此state基础上打开页面链接
  • 触发bug时将用户action序列化,并获取state快照,用以发送bug报告以便于开发重现bug链接
  • 通过网络传递action对象以实现协作环境,而不用复杂的代码修改链接
  • 实现撤销功能及action实现乐观更新(即页面ui先变,再根据服务器返回结果更改ui,出错的话回滚),而不用复杂的代码修改链接
  • 在state记录内切换,当代码变动时依据action历史计算当前state链接
  • 为开发工具提供完整的检查和控制功能,便于开发为自家程序构建自定义工具链接
  • 提供重用了大部分业务逻辑的可替代UI 链接

如果在做可扩展终端、js调试器或其他类似app,那可以试试,至少可以考虑下这些思路(不过他们不是第一次被提出 链接链接)。
然而如果你只是刚学React,不要把Redux作为你的首选。
在啃 react的文档 之后,如果你真的有一些需要用到redux的需求,或者你想试试新东西的话,可以使用redux。不过还是得谨慎使用,就像你对其他任何评价很高的工具那样。
如果你感觉按着Redux的方式写代码很有压力,那大概是你和你队友对它太过看重的迹象。事实上redux只是一个可选的工具罢了( 热加载 2016redux )。
最后,其实你可以参考redux的想法而不一定真的要用redux实现。比如一个具有本地state的react组件:
import React, { Component } from 'react';
class Counter extends Component {
  state = { value: 0 };
  increment = () => {
  this.setState(prevState => ({
  value: prevState.value + 1
  }));
  };
  decrement = () => {
  this.setState(prevState => ({
  value: prevState.value - 1
  }));
  };
  render() {
  return (
  <div>
  { this.state.value }
  <button onClick = { this.increment }> + </button>
  < button onClick = { this.decrement }> - </button>
  </div>
  )
  }
}
这样写就挺好的,还能复用。本地 state表现也良好。
redux提供的折衷是将 “发生了什么” 和 “如何变化” 解耦。
那么是不是事情永远会表现得这么完美呢,并不,这只是个折衷。
举个栗子,我们可以从我们的组件中提取一个reducer:

import React, { Component } from 'react';
const counter = (state = { value: 0 }, action) => {
  switch (action.type) {
  case 'INCREMENT':
  return { value: state.value + 1 };
  case 'DECREMENT':
  return { value: state.value - 1 };
  default:
  return state;
  }
}
class Counter extends Component {
  state = counter(undefined, {});
  dispatch(action) {
  this.setState(prevState => counter(prevState, action));
  }
  increment = () => {
  this.dispatch({ type: 'INCREMENT' });
  };
  decrement = () => {
  this.dispatch({ type: 'DECREMENT' });
  };
  render() {
  return (
  <div> { this.state.value }
  <button onClick = { this.increment }> + </button>
  <button onClick = { this.decrement } > - </button>
  </div>
  )
  }
}

注意我们如何在不运行npm install真正安装的情况下使用redux。是不是很神奇?
当然了,你不一定会对你的带state的组件这么干。除非你明知从中能获取什么益处。
Redux Library只是一个帮助将reducers绑定到全局存储上去的工具而已,如何使用redux全凭个人。
最主要的还是,在决定使用之前,想清楚能获得的收益。



















































03-10
### Redux 教程及常见问题解决方案 #### 如何克隆和安装项目 为了开始使用 Redux 或者 Redux-saga 项目,可以按照如下方式操作。首先访问项目的 Git 地址并执行命令 `git clone` 加上仓库 URL 来获取源码[^1]。 ```bash git clone <repository-url> cd <project-directory> npm install ``` 这组指令会下载项目文件到本地计算机,并安装所有必要的依赖项以便运行应用环境。 #### 开始学习 Redux 的途径 对于想要入门 Redux 的新手来说,可以从官方文档入手,这是最权威的信息来源之一。此外,在线课程、书籍以及社区论坛也是错的辅助材料[^2]。 #### 关于 Redux 是什么及其适用场景 Redux 被定义为一种可预测的状态容器设计模式,用于 JavaScript 应用程序中处理全局状态管理的任务。当应用程序规模较大或者存在多个组件共享相同的数据逻辑时,采用 Redux 可以简化数据流控制过程[^4]。 #### 掌握 Redux 工作原理的关键要素 要深入理解 Redux 运行机制,则需熟悉其三大核心组成部分——Action(动作)、Reducer(减少器) 和 Store(存储): - **Action**: 描述发生了什么事情的对象; - **Reducer**: 根据 Action 类型更新 State 的纯函数; - **Store**: 存储整个应用级别的 state 数据结构的地方; #### 实现异步操作的方法论 针对复杂的业务需求可能涉及到网络请求或其他耗时任务的情况,可以通过引入像 Redux-Saga 或 Thunk 中间件来支持异步行为的实现。 #### 将 Redux 集成至 React 组件体系内的策略 通过利用 `react-redux` 库所提供的 API 函数 connect() 或 hooks (useSelector, useDispatch),能够轻松地把 Redux store 同 React 组件连接起来,从而实现在视图层面上读取或修改 global state 的功能[^5]。 #### 使用调试工具提升开发效率 借助 Chrome 浏览器上的 Redux DevTools 扩展插件可以帮助开发者更直观地观察每一次 action 发起前后所引起的变化情况,进而加快排查 bug 的速度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值