React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化(也就是说React并没有类似于Vue的数据劫持的)
必须通过setState来告知React数据已经发生了变化
创建recommendProducts的Actions和Reducer。然后用connect连接组件和redux store
react-redux 是一个用于将 Redux 和 React 应用程序连接的库。其中 connect 是这个库中的一个主要功能，它能将 React 组件与 Redux store 中的状态和操作关联起来。
connect 是一个高阶组件（Higher-Order Component, HOC），它接收两个参数：mapStateToProps 和 mapDispatchToProps。通过这两个参数，你可以定义如何将 Redux store 中的状态（state）和操作（action）映射到 React 组件的属性（props）中。这样，当 Redux store 的状态发生改变时，你的 React 组件就能自动更新。这是早期版本的 react-redux 主要提供的连接方式。
在 React-Redux v7.1.0 之后引入了 Hooks API，包括 useSelector 和 useDispatch。useSelector 允许你通过传入一个 selector 函数来订阅 Redux store 中的状态。useDispatch 返回 Redux store 的 dispatch 函数，可以用来 dispatch action。
使用这两个 Hooks，你可以更直接地在函数式组件中连接到 Redux store，不再需要使用高阶组件 connect。
总结：
- 使用
connect适用于 class 组件和函数式组件，而使用useDispatch和useSelector只适用于函数式组件。 - 使用
connect会使得你的组件层次结构更复杂，因为它是一个高阶组件。而使用 Hooks 提供了更简洁的代码。 - 使用
connect可能对性能优化更友好，因为你可以通过mapStateToProps和mapDispatchToProps准确地控制哪些数据传递给组件。然而，使用 Hooks 也可以通过优化 selector 函数来提高性能。 - 从 v7.1.0 开始，React-Redux 官方推荐使用 Hooks API（
useDispatch和useSelector） 来连接函数式组件和 Redux store。
接下来我们来处理redux state和dispath连接函数
现在redux store连接起来了，组件状态被redux取代，没有必要保留组件中相关state代码。
接下来处理componentDidMount
修改组件渲染代码
修改为
到此为止mvc转化为redux架构模式
redux是一个通用的JavaScript状态管理容器。对于state的变化是通过触发dispatch一个action，然后最交给reducer计算出新的state来实现的。
但是，dispatch函数本身只能传入一个普通的action对象作为参数。一方面，而在实际运用中，读取数据需要调用异步逻辑，比如jQuery的ajax库或者axios，回调函数内部返回的是一个请求对象，这样就无法获取到一个简单的有实际意义的action对象。另一方面，reducer必须是纯函数，不能包含任何的异步逻辑或者是非纯函数的调用。
这样，异步逻辑要何去何从？
脑瓜子机灵的你一定想到了，把异步逻辑放在组件的生命周期钩子函数里，这样获取到了数据就可以求得一个普通的action对象，再调用dispatch函数触发reducer即可。但是这样造成了组件生命周期臃肿，难以维护的问题。
所以，redux-thunk就增强了dispatch函数，使得dispatch可以传入一个包含异步逻辑的函数作为参数，就解决了dispatch只能传入普通action的问题。
中间件(Middleware)就是运行在redux与框架之间的一层工具或者是插件，可以对redux发生作用，增强dispatch函数。
Redux 中间件可以用于多种用途，例如：
- 打印日志：通过在中间件中记录每个 action 和 store 更新的日志，你可以轻松跟踪应用程序的状态变化。
- 异步操作：使用诸如
redux-thunk或redux-saga等中间件，你可以在 action 中执行异步操作，如 API 调用，并在结果返回后继续进行 Redux state 更新。 - 缓存：可以实现一个缓存中间件，以便在发送网络请求之前检查是否已经存在相应的缓存数据。
通过使用中间件，你可以灵活地扩展和管理 Redux 应用程序的行为。
