看redux的一些笔记

el09xccxy 发布于2019-08-21 11:39 / 530人阅读

摘要：不只为组件提供中的数据及扩展方法，它还为定义的组件添加了一系列事件操作，这些事件的核心点就是，然后可以在自己定义的组件内获得。行为功能是对目的功能和有用行为的一种抽象。下一个中间件函数通常由名为的变量来表示。

redux

这个是好久之前写的，一直忘记粘过来，里面有一些是写作格式是我自己定义的，所以和segmentfault的markdown语法有出入，图片也不能加载，所以原文效果可以在原网站上浏览，敬请赐教。

<------------
文章原网址
------------>

Redux is a predictable state container for JavaScript apps¹.

Redux特性

在过去的十几年里web page一直都以指数递增的方式发展，无论是概念上还是编程上想要彻底读懂这门设计的艺术已经变得不可为，如今在许多大型网站中的一个页面从DOM与Event的微观角度往往聚集着一系列复杂并琐碎的行为功能²，它们聚合在一起构成了我们今天可以在浏览器端可操作的视图，正是如此，怎样管理这些行为功能被提上日程，诸多才华横溢的工程师们引申出状态管理的概念，制作出许多优秀的作品，如Redux、flux、flummox、mobxjs、refluxjs、martyjs、javascript-state-machine、vuex等，其中又以redux和flux最为流行。

) } } export default AppContainer Connect

npm i --save react-redux

Connect是由react-redux提供的一个高阶函数。源码中connect函数接收mapStateToProps、mapDispatchToProps、mergeProps、options四个参数返回一个用于生产Component的函数wrapWithConnect，然后再将组件Component作为参数注入wrapWithConnect(WrappedComponent)函数。

参数	描述
mapStateToProps	将state作为返回结果绑定到组件的props对象上
mapDispatchToProps
mergeProps
options

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
  ...
  return function wrapWithConnect(WrappedComponent) {
    ...
  }
}

⁷

值得一说的是hoistStatics函数源于hoist-non-react-statics第三方，作用是将原来组件中的元素拷贝到目标组件。在使用connect函数的时候直接在已声明的component后面引用connect。

import React, {Component} from "react";
...
import {connect} from "react-redux";

class Login extends Component {
  ...
  render() {
    ...
  }
}
...
export default connect(mapStateToProps, mapDispatchToProps)(Login)

Connect不只为react组件提供store中的state数据及扩展dispatch方法，它还为定义的组件添加了一系列事件操作，这些事件的核心点就是store，然后可以在自己定义的组件内获得store。

constructor(){
  //获取store
  this.store = props.store || context.store
  const storeState = this.store.getState()
  //把store的state作为组件的state，后面通过更新state更新组件
  this.state = { storeState }
  //清除组件的状态，内部是一系列的标示还原
  this.clearCache()
}

附录

Github源码	描述
ducks-modular-redux	{ctionTypes, actions, reducer}规则解决方案
react-slingshot
saga-login-flow
login-flow
redux-saga
redux-auth-wrapper
dva
react-redux-tutorial
reduxjs doc	reduxjs中文档案
alloyteam:react-redux	React 数据流管理架构之 Redux 介绍

redux.js文档，源自redux.js文档中首页的一段话，对redux特性的官方描述。 ↩

行为功能是对目的功能和有用行为的一种抽象。这里特指在"web page"中对视图的按钮等DOM元素点击、页面路由切换等功能的操作行为，在redux中被称为action。 ↩

applyMiddleware(...middlewares):Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store"s dispatch method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain. ↩

expressjs，中间件的介绍为expressjs-middleware，概括来说中间件middleware函数能够访问请求对象 req、响应对象 res 以及应用程序的请求/响应循环中的下一个中间件middleware函数。下一个中间件函数通常由名为next的变量来表示。 ↩

koajs，中间件的介绍为koajs-middleware。 ↩

AOP（Aspect-Oriented Programming），面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术，被认为是OOP的一种延续（补充和完善OOP）。 ↩

->connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {})->wrapWithConnect(WrappedComponent)->class Connect extends Component{}->Connect.contextTypes = {store: storeShape};Connect.propTypes = {store: storeShape}->return hoistStatics(Connect, WrappedComponent)-> ↩

云服务器 GPU云服务器 java的一些代码深度学习的一些应用 php实用的一些代码数据分析的一些方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86976.html

详解react、redux、react-redux之间的关系

摘要：或者兄弟组件之间想要共享某些数据，也不是很方便传递获取等。后面要讲到的就是通过让各个子组件拿到中的数据的。所以，确实和没有什么本质关系，可以结合其他库正常使用。本文介绍了react、redux、react-redux之间的关系，分享给大家，也给自己留个笔记，具体如下： React 一些小型项目，只使用 React 完全够用了，数据管理使用props、state即可，那什么时候需要引入...

xioqua 2019-08-23 13:40 评论0 收藏0
FE.SRC-React实战与原理笔记

摘要：异步实战状态管理与组件通信组件通信其他状态管理当需要改变应用的状态或有需要更新时，你需要触发一个把和载荷封装成一个。的行为是同步的。所有的状态变化必须通过通道。前端路由实现与源码分析设计思想应用是一个状态机，视图与状态是一一对应的。 React实战与原理笔记概念与工具集 jsx语法糖;cli;state管理;jest单元测试; webpack-bundle-analyzer Sto...

PumpkinDylan 2019-08-26 14:04 评论0 收藏0
Redux 基础 - react 全家桶学习笔记（一）

摘要：二基础就是一个普通的。其他属性用来传递此次操作所需传递的数据，对此不作限制，但是在设计时可以参照标准。对于异步操作则将其放到了这个步骤为添加一个变化监听器，每当的时候就会执行，你可以在回调函数中使用来得到当前的。注：这篇是16年10月的文章，搬运自本人 blog...https://github.com/BuptStEve/... 零、环境搭建参考资料英文原版文档中文文档墙...

aaron 2019-08-23 10:58 评论0 收藏0