简介
reusable-react-redux 是一个用于开发 React 应用程序的 npm 包，它可以帮助开发者更快速、更方便地实现 React 和 Redux 的集成。本篇文章将介绍如何使用 reusable-react-redux，以及详解其优秀的功能特性。
安装
通过 npm 安装
你可以通过 npm 安装 reusable-react-redux：
npm install --save reusable-react-redux
通过 Yarn 安装
如果你使用 Yarn 包管理器，可以通过以下命令安装：
yarn add reusable-react-redux
实现
使用 Provider
使用 Provider，首先需要导入它：
import { Provider } from 'reusable-react-redux'然后，在最外层组件处将其包裹：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------- - ---- ----------------------
------ - ----------- - ---- -------
------ ----------- ---- ------------
------ --- ---- -------
----- ----- - ------------------------
----- ----- - -- -- -
--------- --------------
---- --
-----------
-
------ ------- -----使用 Connect
使用 Connect，首先需要导入它：
import { connect } from 'reusable-react-redux'然后，以对象形式书写 mapStateToProps 和 mapDispatchToProps：
const mapStateToProps = state => ({
todos: state.todos
})
const mapDispatchToProps = dispatch => ({
addTodo: text => dispatch({ type: 'ADD_TODO', payload: { text } })
})最后使用 connect 方法连接：
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)
完整示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- ----------------------
----- -------- - -- ------ ------- -- -- -
-----
----
------------- --- ---- -- -- -
--- --------------------
---
-----
------- ----------- -- ------------ ----------- -------------
------
-
----- --------------- - ----- -- --
------ -----------
--
----- ------------------ - -------- -- --
-------- ---- -- ---------- ----- ----------- -------- - ---- - --
--
------ ------- ------------------------ -----------------------------指南
Redux 调试工具
reusable-react-redux 支持使用 Redux DevTools 进行状态调试，只需要在创建 store 时使用：
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
Redux 中间件
可以像使用普通的 Redux 中间件一样使用 reusable-react-redux 中间件，只需要在创建 store 时引入即可：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ ----------- ---- ------------ ------ - ------------ - ---- -------------- ------ ----- ---- ------------- ------ - ------------------ - ---- ---------------------- ----- ----- - ------------ ------------ ------------------------------- ------------------- ------ ------------------- -
多个 store
如果您的应用程序需要处理多个 store，可以使用 reusable-react-redux 提供的 createStore 函数：
import { createStore } from 'reusable-react-redux'
const store1 = createStore(reducer1)
const store2 = createStore(reducer2)复用组件
使用 connect 后，您可以将一个组件与多个 store 进行连接：
const TodoList1 = connect(mapsStateToProps1, mapDispatchToProps1)(TodoList) const TodoList2 = connect(mapsStateToProps2, mapDispatchToProps2)(TodoList)
这种方式使您能够复用组件，一次编写，多处复用。
内部状态和外部状态
在大多数情况下，您需要访问 Redux 的 state 和 dispatch 来更新 UI。但有时候，您需要在组件内部使用本地状态来完成某些任务。可以直接在组件内部使用 React 的 state 来实现，或者可以使用高阶组件 withLocalState，从而达到合并外部状态和内部状态的目的：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - -------- -------------- - ---- ----------------------
----- ------- - -- ------ ------------- -- -- -
----- ------------ -------------- - -----------
----- --------------- - -- -- -
------------------------ - --
--------------- ------ ----- - - --
-
------ -
-----
---------- ------ ------------
--------- ------ -----------------
------- -------------------------------------
------
-
-
----- --------------- - ----- -- --
------ -----------
--
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------- --
--
------ ------- ------------------------ --------------------------------------------多个 HOC
如果您使用多个高阶组件连接组件，可以使用 compose 方法，它支持可变数量的高阶组件作为参数，并从右到左的顺序进行组合：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- ----------------------
------ - ---------- - ---- ------------------
------ - ------- - ---- -------
----- ----------- - -- -------- --------- ------ ---------------- -- -- -
-----
-------------- -------------------------
------- ----------- -- -------------------------------
------- ----------- -- --------------------------- ------ ---------------
------
-
----- --------------- - ----- -- --
------ -----------
--
----- ------------------ - -------- -- --
----------------- -- -- ---------- ----- -------------------- --
--
------ ------- ------------------- ------------------------ ---------------------------------总结
reusable-react-redux 为 React 和 Redux 的集成提供了更加方便的方式。本篇文章介绍了 reusable-react-redux 的安装方法，以及如何使用 Provider 和 Connect 来连接组件和 store。我们还详细解释了如何使用可选项，如 Redux 调试工具、Redux 中间件、多个 store、复用组件、内部状态和外部状态、多个 HOC等。使用 reusable-react-redux 可以使您的 React 应用开发更加快速、高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc981e8991b448dd49f