react高阶组件，集成redux，异步action，logger中间件

最新推荐文章于 2025-01-12 19:02:05 发布

转载最新推荐文章于 2025-01-12 19:02:05 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cd12bd151882535b101ce91

文章标签：

#javascript #ViewUI

博客分享了解决问题的相关内容，包括集成react-redux维护数据源，介绍了Redux搭建步骤、异步action处理及applyMiddleware中间件logger接入，还提及了babel decorator集成，并给出了demo地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享解决问题：

1. react高阶组件的两种实现方式   
2. 如何通过redux来实现数据双向绑定   
3. redux的异步数据流如何实现   
4. redux中间件如何实现并介入   
5. dva的@connect装饰器，如何用高阶组件+redux来实现   
复制代码

目的：

1.简单集成redux，了解redux数据流，中间件简单实现并接入   
2.高阶组件的应用场景：   
    2.1 属性代理   
    2.2 反向继承   
3.如何使用高阶组件实现redux的connect   
4.整合rxjs写一个高阶组件为wappedComponent增加拖拽功能   
复制代码

准备工作：

1. npx create-react-app redux-demo搭建的项目   
2. 开发容器组件：APP.js   
3. 开发展示组件：avatar.js   
复制代码

一. 集成react-redux维护数据源:

npm install --save redux   
npm install --save react-redux   
复制代码

整合redux：gitbook

Redux的搭建步骤：

1. 安装依赖 npm install —save redux react-redux
2. 入口文件配置
	import { Provider } from 'react-redux'
	import { createStore } from 'redux'
	import reducers from './redux/reducers'
	import initState from './redux/initState'
	
	let store = createStore(reducers, initState);
	ReactDom.render(
		<Provider store={store}>
        			<App />
    		</Provider>,
		document.getElementById(‘root’)
	)
3. connect连接，注入props
    import { connect } from 'react-redux'
    export default connect(({ ds }) => ({
        ds: ds
    }))(App);
复制代码

Redux的异步action处理：请看 redux/reducers.js下的 postReducer

Redux的applyMiddleware中间件logger接入：

import { createStore, applyMiddleware } from 'redux'   
let store = createStore(Reducers, initState, applyMiddleware(logger));   
复制代码

logger的实现参考middleware/logger.js
复制代码

二. babel decorator集成

1. \node_modules\babel-preset-react-app\create.js 中找到plugins添加对decorator支持
      [
        require('@babel/plugin-proposal-decorators').default,
        { legacy: true },
      ]
复制代码

这样就支持了装饰器模式   
复制代码

demo地址：redux-demo

转载于:https://juejin.im/post/5cd12bd151882535b101ce91