由于Vuex和Redux都是从Flux中衍生出来，同时Vuex对Redux部分思想也有一些借鉴，所以Vuex和Redux有很多相同点。vuex 和 redux 都是状态管理库，用于单独管理状态的。其中，redux是一个范用的库，可以单独使用。而vuex是专门用来配合vue使用的。他们都应用了flux架构的思想，但是在接口的提供上稍有不同。

不同点：

Vuex定义了state，getter、mutation、action四个对象；redux定义了state、reducer、action;
Vuex触发方式有两种commit同步和dispatch异步；redux同步和异步都使用dispatch;
Vuex和state统一存放，方便理解；reduxstate依赖所有reducer的初始值；
Vuex有getter，目的是快捷得到state；redux没有这层，react-redux mapStateProps参数做了这个工作；
Vuex中mutation只是单纯赋值（很浅的一层）；redux中reducer只是单纯设置新state（很浅的一层）。他俩作用类似，但书写方式不同；
Vuex中action有较为复杂的异步ajax请求；redux中action中可简单可复杂，简单就直接发送数据对象（{type:xxx, your-data}）,复杂需要调用异步ajax（依赖redux-thunk插件）。
Redux使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改；
Redux在检测数据变化的时候，是通过diff的方式比较差异的，而Vuex其实和Vue的原理一样，是通过getter/setter来比较的。

vuex的流向：(新的vue3中使用pinia已经简化,同步异步都是用action)

view——>commit——>mutations——>state变化——>view变化（同步操作）

view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）

redux的流向：
view——>actions——>reducer——>state变化——>view变化（同步异步一样）

————————————————
本文为CSDN博主「〖归〔“”〕属”」的原创文章
原文链接：Redux和Vuex的区别_〖归〔“”〕属”的博客-CSDN博客_vuex和redux的区别

React&Redux

一、纯函数

1、定义:

一个函数的返回结果只依赖于它的参数，并且在执行的过程中没有副作用，我们就把该函数称作纯函数 Pure Component

2、特点:

① 返回结果只依赖于参数

② 执行过程没有任何副作用，例如：修改DOM，异步调用API，刷新页面，控制台输出...

③ 没有额外的依赖，例如：使用当前系统时间、使用随机数、使用全局共享变量...

3、示例:

① 非纯函数
function add ( a, b ){
console.log( a + b*Math.random() )
}

②纯函数
function add ( a, b ){
return a + b*0.5
}

4、价值:

如果应用程序大多数函数都是由纯函数组成，那么测试、调试起来会非常方便，不用担心会产生不可预料的行为，也不会对外部产生影响

二、Context(上下文)

1、解决的问题:

如何在"多层"父子组件间共享数据？

2、定义:

Context：上下文，是一种在一段组件树上的所有组件间共享数据的方法:

3、API:

① React.createContext( dataInitValue )

② Class.contextType / useContext( )

③ Context.Provider / Context.Consumer

4、示例:

示例1：在class组件上使用Context
示例2：在function组件上使用Context

三、HOC(高阶函数)

1、问题

如何为多个组件添加相同的附加功能？

2、定义

高阶组件：High Order Component（简称HOC），是一种为多个React 组件添加公共扩展功能的设计模式，这些扩展功能也称为”横切关注点“

3、实现

① HOC模式不会修改原始组件，也不继承原始组件，而是用函数将原始组件用新功能包装起来组成新组件
② HOC封装函数是纯函数，没有任何副作用
③ HOC可以为被包装组件添加功能或属性，被包装组件不需要知道这些属性是怎么来的

四、Redux(全局状态管理)

1、概述

Redux（作者：Dan Abramov，同时也是React核心团队成员）是 JavaScript 状态容器，提供具有响应式特性的全局状态管理
作用类似于Vue.js中的Vuex，可以在组件间共享全局状态数据
Redux可以运行于Node.js服务器端应用、Web客户端应用、原生App应用；也可以配合jQuery、React、Angular等框架组合使用。

2、面试题：Redux和H5中的sessionStorage / localStorage的区别？

① Redux是保存在内存中的，刷新页面即恢复初始值，无法持久化保存；sessionStorage保存在内存中，localStorage保存在磁盘中，刷新也不会丢失
② Redux中的数据具有响应式特征，订阅了该数据的组件都会自动发生改变；sessionStorage / localStorage中的数据不具备响应式特征
③ Redux可以用于Web客户端应用、原生App应用、Node.js服务器端应用；sessionStorage / localStorage主要应用于Web客户端页面间的数据共享

3、四大核心概念

① state
       应用在当前时刻需要记录的需要具备响应式特性的数据，尤其是需要在多个组件间共享的数据，故需要集中存储
       例如：服务器响应数据、缓存数据、本地生成尚未持久化到服务器的数据、UI 状态数据等
       React组件也有“状态(state)”数据，二者有本质的不同
           ① Redux中的state是没有setState()方法的，即不能随意修改
           ② Redux中的state用于多组件共享，而React中的state仅在当前组件中使用
           ③ React中的state数据具有“合并”特性；而Redux中的数据修改不具备“合并”特性
   ② action
       要对数据执行的动作；要想更新 state 中的数据，需要发起一个 action
       每个action都是一个普通 JavaScript 对象，用来描述发生想要对state执行什么操作
       每个action都需要有一个type属性，描述操作的目标
           { type: 'CHANGE_NEWS_PNO', pno: 6 }
           { type: 'TOGGLE_AGREEMENT', value: true }
           { type: 'SET_FAVORITE_TOPICS', list: [10, 25, 31] }
   ③ reducer
       指定对 state 执行 action 动作应该如何实现
       reducer是一些纯函数，接收当前的state和要执行的action作为参数，返回根据action修改后的新的state对象，从而实现action想要实现的操作
       function appReducer(state = initState, action){
       if(action.type === ' CHANGE_NEWS_PNO '){
           return { ...state, newsPageNum: action.pno }
       }else if(action.type === ' TOGGLE_AGREEMENT '){
           return { ...state, agreementChecked: action.value }
       }else if(action.type === ' SET_FAVORITE_TOPICS '){
           return { ...state, favoriteTopics: action.list }
       }else {
           return state
       }
}
   ④ store
       状态数据存储仓库；所有的状态最终都被存储到一个唯一的“存储仓库”中
       仓库的职责
           ① 存储所有的state
           ② 提供 getState( ) 供外界查询数据状态 —— 返回全部的状态数据
           ③ 提供 dispatch(action) 供外界更新状态
           ④ 通过 subscribe(listener) 注册监听器
           ⑤ 通过 subscribe(listener) 返回的函数注销监听器

4、在Node.js应用中使用Redux

5、在React应用中使用Redux（单一文件）

6、在React应用中使用Redux（多个文件）

五、React-Redux(全局状态管理--使用Provider共享store)

1、问题

在多模块文件的React应用中，如果在根模块中创建 Redux store，然后通过props依次传递给所有的子组件，实在太麻烦了

2、方案

react-redux模块可用于使用了Redux的React项目中，提供了两方面的扩展功能
① 一个“Context.Provider”：为它所包含的所有子组件提供store使用
② 一个HOC高阶组件函数：connect()函数将自定义组件提升为“高阶组件”，将Redux的dispatch和state映射为被包装组件的props

3、步骤

① 安装依赖模块 npm i redux react-redux
   ② 顶级组件中创建 store 和 reducer，使用Provider为子组件共享store
   ③ 将store.dispatch()映射为子组件的props
   ④ 将store.getState()映射为子组件的props

React&Redux

理解Redux

Redux的由来:

React&Redux

一、纯函数

1、定义:

2、特点:

3、示例:

4、价值:

二、Context(上下文)

1、解决的问题:

2、定义:

3、API:

4、示例:

三、HOC(高阶函数)

1、问题

2、定义

3、实现

四、Redux(全局状态管理)

1、概述

2、面试题：Redux和H5中的sessionStorage / localStorage的区别？

3、四大核心概念

4、在Node.js应用中使用Redux

5、在React应用中使用Redux（单一文件）

6、在React应用中使用Redux（多个文件）

五、React-Redux(全局状态管理--使用Provider共享store)

1、问题

2、方案

3、步骤

猜你喜欢