在react中使用vuex的示例代码

前言

最近，笔者正在学习使用react。当他提到反应时，他无法回避。Redux是一种状态管理架构，广泛应用于react项目中。然而，redux不是为react而设计的，它需要react-redux在它们之间搭建一座桥梁。同时redux架构规定只能发送同步动作，还有redux-thunk、redux-saga等中间件。是发送异步动作所需要的，所以修复redux并不容易，而且名词太多了。我之前接触过vuex，vuex对笔者这样的鸡比较友好。但是vuex和vue是配套的，所以在react里面是不可能用的，我这辈子也不想在react里面用。但是我不喜欢它，所以这篇文章探讨了如何制作一个像vuex这样的可以在react中使用的状态管理工具。我把它命名为reux。

vuex=redux react-redux redux-saga

文本

响应数据观测系统

vue的一个主要特点是响应性数据观察系统，它可以在获取数据时收集依赖关系，并在设置数据时触发更新。借助vue的数据观察系统，vuex可以轻松收集数据依赖关系，依赖关系可以细到组件的粒度，也就是说，当某个状态发生变化时，只有依赖于这个状态的组件才会触发rerender，这样看来redux系统是相当愚蠢的，只要提交动作，它就会自动从根组件(react-redux)判断shouldCompoentUpdate。

上图来自vue官网对vuex架构的描述和链接。

上图中的组件是vue组件。只要vue组件执行渲染，vuex的数据响应系统就可以自动收集依赖关系。当状态改变时，依赖于该状态的组件将被重新呈现。由于我们想实现一个类似vuex的状态管理工具，即支持以get的方式收集依赖关系，以set的方式触发更新，所以reux利用了vue的响应性数据观察系统，这意味着前人种树，后人乘凉。

如何收集依赖关系

我们已经有了一个响应的数据系统，下一个需要解决的问题是如何收集依赖关系。要收集依赖关系，我们必须触发get，触发get的前提是组件可以获取store，所以第一步是将store注入组件。像react-redux一样，reux提供了一个提供程序，以便子组件可以获得存储。

类提供程序扩展组件{ GetChildContext(){ return { store : this . props . store }；} render(){ const { children }=this . props；归还儿童；} } provider . childcontexttypes={ store : ProPtypes . object }；相应的子组件可以在上下文中获取存储，如下所示

class Child扩展了Component { render(){//store=this . context . store } } Child . context types={ store : ProPtypes . object }；这样写的缺点很明显。每个子组件都需要定义contextTypes，类似于react-redux。reux为映射状态=道具提供了一个连接函数

const connect=(mapstatetrops=()={ })={ return(WrappedComponent)={ const Wrapper=class extends Component { render(){ const store=this . context . store；const props=Object.assign({}，this.props，mapstattoprops(store . state，this.props)，{dispatch: store.dispatch，commit : store.commit })；返回WrappedComponent {.props }/} } wrapper . context types={ store : ProPtypes . object }；reaturn Wrapper}}这样，只要组件执行rerender方法，就会触发get hook，这样商店就会自动收集依赖项。让我们考虑一下依赖关系是什么。事实上，依赖关系应该是组件实例。当set hook被触发时，每个依赖项(即组件实例)都可以通过执行forceUpdate方法来达到重新渲染的效果。

但问题是，当get钩子被触发时，我们如何确定谁是依赖者呢？借鉴vue，我们定义了一个栈，当组件挂载时会被推，当组件挂载时会被弹出

componentWillMount(){ PushTarget(this)；} ComponentDidMount(){ popTarget(this)；}所以当get hook被触发时，当前的目标就是目标依赖。同时，应该注意的是，当组件被更新时，依赖关系应该被再次收集，因为依赖关系很可能在更新后已经改变

Update() {//清空依赖项this . clear()；pushTarget(这个)；this . force update(()={ popTarget(this)；})}至此，我们的小目标已经完成，在react中使用vuex不再是梦！

原始地址

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。