Redux函数踩坑

redux 函数踩坑Redux 函数踩坑

发生的问题：
直接使用redux中的action发现不会直接执行返回的函数

❓：action 他是直接 return 一个函数 这个函数会自己执行吗 在 redux 中
💡：
gpt：
在 redux 中，thunk 是一个中间件，它允许我们在 action creators 中返回一个函数而不是一个纯对象。当你使用 redux-thunk 中间件时，如果 action creator 返回的是一个函数而不是一个 action 对象，redux 会自动执行这个返回的函数。

所以在你的代码中，closeTab 函数返回的是一个 thunk action（一个函数），当这个 thunk action 被 dispatch 时，`redux`-thunk 中间件会接管并自动执行这个函数。这个函数内部可以执行异步操作并且在操作完成后可以 dispatch 其他的 actions。

这就是为什么 thunk action creators 非常适合处理异步逻辑或者更复杂的同步逻辑，因为它们可以访问 dispatch 和 getState，允许在 action creator 中执行更多的逻辑操作。

❓：直接引入 redux 中的 action 函数 和 使用 connect 通过触发 action 又什么区别
💡：
gpt：
在 Redux 中，action 函数通常是指 action creator，它是一个简单的函数，返回一个 action 对象。action 对象是一个包含 type 属性的普通 JavaScript 对象，用于告知 reducer 如何更新 state。在使用 Redux 时，通常会通过 store 的 dispatch 方法来触发这些 action。

当使用 connect 来连接 React 组件和 Redux 时，一部分工作被抽象化了。connect 是 react-redux 库提供的一个高阶组件（HOC），用于连接 React 组件和 Redux store。在使用 connect 时，你会传入两个主要的参数：`mapStateToProps` 和 `mapDispatchToProps `。

`mapStateToProps` 用于将 store 中的 state 映射为组件的 props。这样，组件可以通过 props 访问到 store 中的数据。

`mapDispatchToProps ` 则用于将 action creators 映射为组件的 props。通过这样做，你可以直接在组件的 props 上调用 action creator，而不需要手动调用 store 的 dispatch 方法。

🔴 1、区别如下：

🟢 1.1、直接引入和使用 action 函数：

需要手动调用 store 的 dispatch 方法来触发 action。
在组件外部或组件内部引入 action creator，然后通过 dispatch(actionCreator())的方式来使用。

组件需要直接与 Redux API 交互，这可能在某些情况下会使组件的代码变得冗余。

🟢 1.2、使用 connect 映射 action 函数：

connect 处理了 dispatch 的调用，你可以直接通过 props 来使用已经映射好的 action creator。

组件内部通过 this.props.actionCreator()的方式来触发
action，代码通常更简洁且易于理解。

可以利用 connect 的第二个参数 `mapDispatchToProps ` 将多个 action creator 组合到一起，一次性传给组件。

总结来说，使用 connect 映射 action 函数为组件的 props 提供了更简洁、声明式的方式来使用 action creator，同时隐藏了 dispatch 的直接使用，是一种更符合 React 组件化的做法。而直接引入并用 dispatch 触发 action 则是一种更底层、显示的方法，可能在某些需要精确控制 dispatch 时刻的场景下更有用。