在使用 React-Redux 进行状态管理时，我们经常会使用 dispatch 方法来触发状态的更新。但是有时候我们会发现，即使我们正确地使用了 dispatch 方法，状态却没有被更新，这可能是一个比较常见的 bug。在本文中，我们将探讨这个 bug 的原因和解决方案。
原因
在 React-Redux 中，dispatch 方法会触发一个 action，这个 action 会被传递给 reducer，然后 reducer 会根据这个 action 更新状态。如果我们的状态没有被更新，那么问题很可能出在 reducer 中。
在 reducer 中，我们需要返回一个新的状态对象，而不是修改原有的状态对象。如果我们直接修改原有的状态对象，那么 React-Redux 将无法检测到状态的变化，从而不会触发组件的重新渲染。
解决方案
为了避免这个问题，我们需要确保 reducer 返回一个新的状态对象。我们可以使用 ES6 中的展开运算符来实现这一点，例如：
-- -------------------- ---- -------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-在这个例子中，我们使用展开运算符创建了一个新的状态对象，这个新的状态对象包含原有的状态，但是 count 属性被更新了。这样，React-Redux 就能够正确地检测到状态的变化，从而触发组件的重新渲染。
示例代码
下面是一个完整的示例代码，演示了如何使用 React-Redux 和展开运算符来更新状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - --------- ------- - ---- --------------
-- -- -------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
-- -- -----
----- ----- - ---------------------
-- ----
-------- --------- ------ ---------- --------- -- -
------ -
-----
----------------
------- ------------------------------
------- ------------------------------
------
--
-
-- -- --------------- - ------------------
----- --------------- - ------- -- -- ------ ----------- ---
----- ------------------ - ---------- -- --
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
---
-- ----- -----
----- ---------------- - --------
----------------
------------------
-----------
-- ----
-------- ----- -
------ -
--------- --------------
----------------- --
-----------
--
-
------ ------- ----在这个示例代码中，我们首先定义了一个 reducer 函数，然后使用 createStore 方法创建了一个 store 对象。接着，我们定义了一个 Counter 组件，这个组件使用了 connect 方法连接了 store 和组件。最后，我们使用 Provider 组件将整个应用包裹起来，并渲染了 Counter 组件。
当我们点击 + 或 - 按钮时，dispatch 方法会触发相应的 action，然后 reducer 会根据这个 action 更新状态。由于我们使用了展开运算符来创建新的状态对象，React-Redux 就能够正确地检测到状态的变化，从而触发 Counter 组件的重新渲染。
总结
在 React-Redux 中，dispatch 方法是触发状态更新的关键。如果我们的状态没有被更新，那么问题很可能出在 reducer 中。为了避免这个问题，我们需要确保 reducer 返回一个新的状态对象，而不是修改原有的状态对象。我们可以使用 ES6 中的展开运算符来实现这一点。希望本文能够帮助你解决在 React-Redux 中遇到的 dispatch 不更新的 bug。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6637718fd3423812e4599cbb