理解Redux和React-Redux
Redux
什么是Redux?
Redux是用action事件来管理和更新应用状态的模式和工具库，它对整个应用中的状态进行集中管理，称为仓库Store。
为什么用Redux?
有许多state是很多组件都需要使用的，而组件之间的通信很麻烦，而且会造成很多组件传递自己并不需要的数据。于是需要一个状态管理仓库来帮助管理全局的状态。这样每个组件只从仓库中获取自己需要的那部分数据即可，当然组件仍然可以有自己私有的state。
什么时候使用Redux?
-
一些state在很多组件中都需要使用时
（并不只这一点，目前还不理解其他原因，故只写这一点）
怎么使用Redux?
Redux有几个关键的概念
1. store:仓库，管理全局的state，是一个对象
2. action:事件，表示用户的某种行为，是一个对象 {type:'add',payload:'2'}
3. action creator():是一个函数，该函数的调用可以生成action对象
4. reducer():是一个只接收state和action为参数的纯函数，根据action.type更新state，得到新的state，但原state不发生变化。
5. dispatch():当用户发生某种行为时，可以在eventHandler中dispatch一个action，即触发某种行为，交给store，store会调用reducer函数，得到新的state。这是更新state的唯一方法。
6. subscribe():用来订阅数据的变化，当state发生变化，就会立即执行一次。
使用流程
-
书写reducer->创建reducer
-
创建并初始化store
-
store.getState()获取state
-
用户行为发生，在eventHandler中store.dispatch(action)触发事件，交给store
-
store调用reducer，reducer返回新的数据，store会使用return的值更新state。
-
store.subscribe()订阅数据变化
-
页面重新渲染
还有一种方式是借助@reduxjs/toolkit的createSlice和configureStore
-
用createSlice创建reducer和action creator
-
根据reducer配置store
-
用react-redux中的useSelector从state tree中获取state
-
用react-redux中的useDispatch获取dispatch
Redux的优缺点？
优点很明显：
-
对整个应用的状态进行集中管理，每个组件都可以从仓库中获取自己需要的数据，避免了复杂的组件间通信。
-
Redux在任何ui框架中都可以使用，不过更多用于React框架。
也有一些缺点吧：
每个组件都需要用store.getState()获取数据，store.dispatch()触发行为更新数据，store.subscribe()订阅数据变化，是有一些麻烦的。
React-Redux
什么是React-Redux
React-Redux是把Redux和React框架集成起来，更加方便React使用的一个仓库。其核心思想和整体流程是一样的。
已经有了Redux，为什么还要React-Redux？
我们希望最顶层的组件拥有store，而且每个组件都直接访问store，获取数据 更新数据 订阅数据变化确实有些麻烦。
React-Redux具体又是怎么做的？
一些概念：
-
connect()函数：将state和组件联系起来，接收两个参数mapStateToProps,mapDispatchToProps。
-
mapStateToProps是一个函数，接收整个store，返回ui组件需要的state
-
mapDispatchToProps可以是函数，也可以是对象。
具体实现：
React-Redux在原顶层App组件外面又包裹了一个Provider组件作为新的顶层组件，并将store提供给Provider组件作为其Props，这样store就是整个组件树中最顶层组件所拥有的数据。其他各个子组件都可以通过Context接收到Provider组件的props，即各个子组件都可以访问到store。
React-Redux还提供了一个容器组件，容器组件通过connect(mapStateToProps,mapDispatchToProps)函数包裹UI组件，mapStateToProps将UI组件需要的state映射到UI组件接收的Props对象中，mapDispatchToProps将UI组件需要的需要用到的action creator映射到UI组件接收到的Props对象中，action creator可以在eventHandler被调用，一旦调用，生成的action对象就会被dispatch，交给store，reducer函数执行，state更新，页面重新渲染。
React-Redux将所有组件分为容器组件和UI组件。容器组件负责数据和业务逻辑，UI组件负责展示。
Redux和React-Redux的区别：
Redux组件直接访问store；React-Redux组件通过connect和store联系。
Redux组件需要手动写getState,dispatch,subscribe；React-Redux组件通过mapStateToProps拿到state作为Props，通过mapDispatchToProps拿到事件触发函数作为Props，并且props还可以传递给子组件。