Redux 中使用 React 的过程
Redux 是一种数据流管理库，通常与 React 一起使用。使用 React 和 Redux 协同工作可以为应用程序提供更好的性能和可维护性。在这篇文章中，我们将了解如何在 Redux 中使用 React。
Redux 的原则
在设计 Redux 应用程序之前，需要了解一些关于 Redux 的原则。
第一个原则是 Redux 是单一的数据源，它将所有应用程序的 State 存储在一个单一的 Store 中，可以统一处理状态的更新和变化。这有助于减少数据冲突和错误。
另一个重要原则是 Redux 数据的不可变性。与直接修改应用程序状态的方法不同，Redux 要求对现有数据进行复制和修改。这可以防止出现副作用和意外的行为。
Redux 应用程序工作原理
Redux 应用程序包括 3 个基本组件：Store、Action 和 Reducer。
Store 包含应用程序中的所有状态，并提供了访问和更新 Store 数据的方法。
Action 是一个单纯的对象，描述要在应用程序中执行的操作。
Reducer 确定应用程序状态的变化逻辑，将 Action 转换为新的状态。Reducer 是纯函数，可以根据固定的输入生成确定的输出。
在 Redux 中使用 React
Redux 应用程序的 React 组件分为 2 种类型：容器组件和展示组件。
容器组件负责管理 Store 和调度 Action，但不处理 DOM。展示组件只负责展现数据和处理用户交互，但不知道 Redux 存在。
以下是 Redux 中使用 React 的一些步骤。
- 安装依赖
使用 React 和 Redux 需要安装一些依赖项：
npm install redux react-redux
- 创建 Store
在 Reducer 中定义数据结构后，可以创建 Store 实例。
import { createStore } from 'redux'
import rootReducer from './reducers'
const store = createStore(rootReducer)- 创建容器组件
容器组件需要连接 Store 和展示组件。使用 react-redux 库可以有效地减少与 Store 交互时的样板代码。
-- -------------------- ---- -------
------ - ------- - ---- -------------
------ - ---------- --------- - ---- ------------
------ ------- ---- -----------------------
----- --------------- - ------- -- -
------ -
------ -----------
-
-
----- ------------------ - ---------- -- -
------ -
---------- -- -- ----------------------
---------- -- -- ---------------------
-
-
------ ------- --------
----------------
------------------
----------- 创建展示组件
展示组件只接收容器组件传递的 props。以下是一个展示组件的示例代码。
-- -------------------- ---- -------
------ ----- ---- -------
----- ------- - -- ------ ---------- --------- -- -- -
-----
----------------
------- ------------------------------
------- ------------------------------
------
-
------ ------- -------- 在应用程序中使用组件
创建一个顶层组件，将 Store 传递给应用程序。使用 Provider 组件将 Store 提供给应用程序中的所有组件。
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------- - ---- -------------
------ ----- ---- ---------
------ ---------------- ---- -------------------------------
----- --- - -- -- -
--------- --------------
----------------- --
-----------
-
------ ------- ---结论
Redux 和 React 很容易协同工作，但需要正确理解原则并尝试不同的应用程序结构。使用容器组件和展示组件，可以有效地管理数据和状态，并提高代码的可维护性。
代码
自增自减的示例代码：
store.js
import { createStore } from 'redux'
import rootReducer from './reducers'
const store = createStore(rootReducer)
export default storereducers.js
-- -------------------- ---- -------
----- ------------ - -
------ -
-
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - -
---- ------------
------ - --------- ------ ----------- - - -
--------
------ -----
-
-
------ ------- -----------actions.js
export const increment = () => ({
type: 'INCREMENT'
})
export const decrement = () => ({
type: 'DECREMENT'
})containers/CounterContainer.js
-- -------------------- ---- -------
------ - ------- - ---- -------------
------ - ---------- --------- - ---- ------------
------ ------- ---- -----------------------
----- --------------- - ------- -- -
------ -
------ -----------
-
-
----- ------------------ - ---------- -- -
------ -
---------- -- -- ----------------------
---------- -- -- ---------------------
-
-
------ ------- --------
----------------
------------------
----------components/Counter.js
-- -------------------- ---- -------
------ ----- ---- -------
----- ------- - -- ------ ---------- --------- -- -- -
-----
----------------
------- ------------------------------
------- ------------------------------
------
-
------ ------- -------App.js
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------- - ---- -------------
------ ----- ---- ---------
------ ---------------- ---- -------------------------------
----- --- - -- -- -
--------- --------------
----------------- --
-----------
-
------ ------- ---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673474c00bc820c5824935fb