在 Redux 开发中，我们经常会遇到需要执行回调函数的场景，比如在 state 发生改变后，需要触发某个事件进行一些额外操作。这时，我们一般会使用 setState 方法来更新 state 并执行回调函数。
但是，在某些情况下，我们会发现 setState 的回调函数并没有被触发，这是为什么呢？接下来，我们将详细探讨这个问题并提供解决方案。
问题分析
我们首先来看一个简单的示例代码：
-- -------------------- ---- -------
------ - -------- - ---- --------
-------- ----- -
----- ------- --------- - ------------
----- ----------- - -- -- -
-------------- - -- -- -- -
------------------- -----------
---
--
------ -
-----
--------- -----------
------- --------------------------------
------
--
-
------ ------- ----上面的代码中，我们使用 useState 来声明了一个名为 count 的 state，然后在 handleClick 函数中调用 setCount 方法来更新 state，并通过第二个参数传入了一个回调函数，用来在 state 更新成功后执行一些额外的操作。但是，当我们点击按钮时，发现控制台并没有输出 count: 1，这就说明回调函数并没有被触发。
这是为什么呢？我们知道，在 Redux 中，state 是通过 reducer 来管理的，而 reducer 会根据 action 的 type 和 payload 来更新 state。那么，当我们使用 setState 方法时，其实就是在派发一次 action，而更新 state 的操作是在 reducer 中进行的。因此，如果我们要在 state 更新成功后执行回调函数，需要在 reducer 中实现这个功能。
解决方案
要解决这个问题，我们可以借助 Redux Toolkit 提供的 createSlice 和 createAsyncThunk 这两个方法来实现。首先，我们需要安装 @reduxjs/toolkit 和 react-redux 这两个库。
npm install @reduxjs/toolkit react-redux
接下来，我们使用 createSlice 创建一个 Redux slice 来管理我们的 state。一个 slice 包含了 reducer、action 和 state 的定义，我们可以通过调用 createSlice 来生成一个 slice。
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
----- ------------ - -------------
----- ----------
------------- --
--------- -
---------------- -
------ ----- - --
--
--
---
------ ----- - --------- - - ---------------------
------ ------- ---------------------上面的代码中，我们创建了一个名为 counter 的 slice，其中 initialState 的默认值为 0，reducers 中定义了一个名为 increment 的 action，用来递增 state 的值。
然后，我们使用 createAsyncThunk 来创建一个异步 action，用来在 state 更新成功后执行回调函数。在回调函数中，我们可以通过传入的 getState 方法来获取更新后的 state 值，然后进行一些操作。
-- -------------------- ---- -------
------ - ---------------- - ---- -------------------
------ ----- -------------- - -----------------
-------------------------
----- --- - -------- -- -- -
----- ----- - -----------
------------------- -----------
-
--最后，我们需要将我们的 slice 和异步 action 注入到 store 中，并在组件中使用 useSelector 和 useDispatch 来获取 state 和 dispatch。
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ---------- -------------- - ---- -----------------
-------- ----- -
----- ----- - ------------------- -- ---------------
----- -------- - --------------
----- ----------- - -- -- -
----------------------
---------------------------
--
------ -
-----
--------- -----------
------- --------------------------------
------
--
-
------ ------- ----这样，当我们点击按钮时，就可以在控制台中看到输出了 count: 1，说明回调函数已经被成功触发了。
总结
在 Redux 中，由于 state 的更新是在 reducer 中进行的，因此使用 setState 方法时回调函数可能不会被触发。我们可以借助 Redux Toolkit 提供的 createSlice 和 createAsyncThunk 来实现在 state 更新成功后执行回调函数的功能。这对于我们的开发工作有着重要的指导意义，可以让我们更好地理解 Redux 的工作原理，并提供更加实用的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fae979f6b2d6eab31b0aa1