🚴 👩🏿‍🤝‍👩🏻 🥕 没有Redux是否有可能？ 🙇🏿 🚣🏾 🎤

今天，您可以找到很多需要React / Redux的职位。 React很棒，没有问题。 Redux的问题是没有它是否可能。如果您稍微搜索一下Google，在Habré上会有一篇可靠的文章，作者会问同样的问题。在使用简单示例（todoList）的文章中，this.updateViews（）方法被调用的次数过多（七到八次），并且似乎更容易实现。

这里的主要思想是可观察模型，react负责可观察模型，剩下的唯一事情就是创建模型。

在创建模型之前，请先谈谈客户端的设计（架构）：

索引-原始数据
历史-数组[模型]
观察者-模型
查看-错误，焦点，标志

index.jsx-用户屏幕的程序入口点。索引使用默认数据呈现所有组件，进行异步查询，使用新数据重绘组件。

// index.jsx <History> <Observer> <HeaderView /> <MainView /> </Observer> </History>

Observer.jsx负责同步多个视图的模型。例如，Petya填写要约表单，并在页面标题中看到实时预览。观察者存储模型对象，并向子组件提供api：onModelChange（字段，值）。

History.jsx是模型对象的堆栈，其中api：提交和回滚。

用户可以用钢笔输入Model.js，这是最有价值的。模型中的其他数据不需要存储。模型不是React组件，而是常规的js类。

 class Model { constructor(other = {}) {} // copy constructor (and default too) isEqual(other) {} // operator == less(other) {} // operator< swap(other) {} hash() {} fieldNameConstrains() {} //see below please }

至少历史记录需要复制构造函数。 isEqual方法用于未保存的弹出更改（比状态标记更方便）。 fieldNameConstrains方法适用于相关字段。

粗略地说，如果存在相关字段，则需要连续更改它们。

 class Model { // constrains // distance <== velocity * time velocityConstrains(newVelocity) { this.velocity = newVelocity; this.distance = this.velocity * this.time; } timeConstrains(newTime) { … } distanceConstrains(newDistance) { this.distance = newDistance; this.time = this.distance / this.velocity; } }

从个人经验来看，诸如model.field.onchange之类的东西是行不通的，因为有时您需要调用复制构造函数，而根本不需要onchange事件。

View.jsx

 class View extends React.Component { state = { errors: {}, focus: {}, … } render() { … <input value={this.props.model.title} onChange={e => this.props.onModelChange('title', e.target.value)} /> … } }

验证方式无需在模型中进行验证。必须在视图中完成（不要忘记该视图是用户的屏幕，并且不能在屏幕上显示整个模型）。验证器是一组谓词。仅有两种验证算法：1）我们以表格的形式找到所有错误，或者2）我们找到第一个错误。举个例子

 class View extends React.Component { onClickSaveButton() { const mapper = { title: () => model.title.length && !maxLenValidator(model.title, 25), price: () => !(model.price % 40 == 0), url: () => !urlValidator(model.url), … } const errors = map(mapper, (validator, key) => { return validator() ? key : undefined; }).filter(Boolean); } //

访问权限。这里最主要的是保留而不使用继承。想法是该模型包含所有字段，并且我们修剪角色的字段。也就是说，它是一个白名单，默认情况下会保留模型中的其余字段。添加了一个用于验证的步骤-我们对验证对象进行投影（它也是mapper，请参见上文），也就是说，我们仅验证必要的字段。

关于生产。这种方法已经在生产中使用了一年，它是创建广告活动（包括横幅）的界面。各种形式的复杂性-从一个模型到屏幕，以许多不同类型的模型结尾。在这里您可以添加后端喜欢发送嵌套结构，您不应该害羞，只能在视图中存储平面结构。

关于isEqual模型方法。在utils.js中的某个地方会有isEqual和isEqualArray方法：

  function isEqual(left, right) { return left.isEqual(right); } isEqualArray(v1, v2) { if (v1.length !== v2.length) { return false } for (var k = 0; k != v1.length; k++) { if (!isEqual(v1[k], v2[k])) { return false; } } return true; }

您需要尽量不要使模型嵌套。不要忘记该模型是用户数据，而不是数据结构。

参考文献：

→ 时间
→ 两个

没有Redux是否有可能？

More articles: