前言
随着前端技术的不断发展，越来越多的框架和库出现在了我们的视线中。Redux 作为一种状态管理工具，常常用于中大型前端应用程序。而 Redux-Wrapper-Extended 是一个强大的 Redux 外壳，有助于简化 Redux 应用程序的代码、加快开发流程并提高代码的可维护性。
安装和基础配置
Redux-Wrapper-Extended 是一个可扩展的第三方包，你可以使用 npm 初始化你的项目并安装这个包。
npm install redux-wrapper-extended --save
如此一来就已经安装好了这个第三方包，下一步是在你的应用中引入了。
import { createWrapper } from 'redux-wrapper-extended';接着，你可以使用 createWrapper() 方法创建包的实例并将 Redux store 作为参数传递进去。
const wrapper = createWrapper(store);
这样，你的 Redux 应用程序就支持了新的 React Component 封装，重连、异步操作和热重载。下面将为你介绍一些常用的功能。
实现异步操作
异步操作是在前端应用程序中最常用的一种操作之一。但是，Redux 并没有原生支持异步操作。为了实现异步操作，你需要使用 Redux Package (redux-thunk, redux-saga 等)或使用 Redux Wrapper Extended，在这篇教程中，我们会使用 Redux Wrapper Extended 来支持异步操作。
Redux Wrapper Extended 内置了异步方法 callApi()，这个方法可以优化 Redux 调用方式并且避免了异步操作的模板代码。
-- -------------------- ---- -------
------ - ------- - ---- -------------------------
----- ---------- - -- -- -
------ ---------
---- ---------------------------------------------
------- ------
--
---------------- -- ----------------------
------------ -- ------------------
--如上代码所示，callApi() 方法接收一个对象作为唯一参数，该对象应包含请求的 url 和方法（ GET、POST、DELETE 等等）。
集成 React Component 封装
React 是现代前端应用程序的核心。通过 Redux Wrapper Extended，你可以创建 React Component 的高阶组件，捆绑操作的 state 和 props。这使得代码更加的可读，更易于维护。
-- -------------------- ---- -------
------ - --------- - ---- -------------------------
----- ------ - -- --------- -- -- -
----- ------------ - --- -- --------------------------
------ -
------ ----------- -------------------- ----------------------- --
--
--
----- --------------- - ------- -- -----
----- ------------------ - - --------- --
------ ------- -------------------------- ----------------------------上面的代码中，Search 组件包含一个输入框和一个 handleChange 方法，用于修改组件的 search prop。after that，withRedux() 方法接收两个函数（ mapStateToProps 和 mapDispatchToProps）作为参数，并返回一个增强了 Redux 功能的新组件。
实现热重载
应用程序的热重载让开发者能够更快地开发、测试和调试应用程序。Redux Wrapper Extended 可以助您实现开发者梦寐以求的连续热部署。
import { hot } from 'redux-wrapper-extended';
const MainPage = () => {
return <h1>Welcome</h1>;
};
export default hot(MainPage);如上代码所示，通过 hot() 方法，可以让应用程序使用 module.hot API 和 react-refresh 能力。这样它就可以实现模块级别的热重载。
总之，Redux Wrapper Extended 是一个极大提高了开发效率并减少代码段的框架，有极大的指导价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cf2