redux学习笔记

redux是数据管理框架,使用它主要是由于react组件化以后，组件间值的传递比较麻烦，因而使用一个顶层的组件来储存和分发；这样就不用传来传去了；可是react用起来不太方便；因而有了react-redux，使用provide和connect链接起来就能够mapStateToprops来接收参数和改参数；原来action只能是对象,redux-thunk 是一个中间件，使用了它就能够派发函数了； 虽然不少新的东西，前端突飞猛进，好比又出了hooks,vue2才刚了解，vue3就有消息了；因此有人抱怨学不动了,其实都是为了更方便的需求；

详细：

Flux 官方推出的原始辅助数据层框架，用于管理react的数据，由于react 组件传递值要一层层传，很麻烦，因此就专门给了个管理层，放在顶层，均可以穿给其它组件； 升级的了是Redux：Redux=reducer+Flux

原理：

Components：借书的人 Action creatotrs：要借什么书这句话 Store:图书馆管理员 Reducers:记录本

流程： 首先须要一个store,页面从store 中取数据； 若是页面想改变store中的数据，须要派发action给store; store把action 和以前的数据一块儿给redux,redux结合以前的数据； 返回新的数据给store,store更新本身的数据，再告诉页面；页面联动；

View 派发action,action 经过dispatch派发给store,store连同以前的state一块儿传给reducer;reducer返回新的数据给store，store改变state

中间件： redux-thunk ：之前action能够 函数，原来只能是对象；

下面分别是Redux和React-redux用法：

1、redux

//先建立store //建立reducer,传给store

加入调试工具同时：github.com/zalmoxisus/…

//函数，返回默认state,并设定初始值,并让state是初始的defaultState

在这里插入图片描述 记得dispatch!!! store.dispatch(action)

this.state.currentpage

以前拿数据要这样拿： 引入就可使用：

2、react-redux

可是有了react-redux以后，能够方便点，直接使用provide和connect；就能够用mapStateToprops和mapDispathToProps，方便操做了；

store和reducer同样：

在APP.js ，组件外层加一个Provider

1.须要使用Provider，让组件可使用store，stote提供给内部组件； 2.须要connect 链接store和组件

链接而且提供两个方法

import {connect} from 'react-redux';
export default connect(mapStateToProps,mapDispathToProps)(WrappedWebserver) /
复制代码

两个方法： mapStateToprops：把store中的store数据给组件props; mapDispatchToProps:调用dispatch 改变state中的数据

这里直接绑定一个事件changeInputValue，而后直接建立一个action,而后dispatch给了reducer，

reducer判断action type，而后把获取到数据，新建立一个数据返回给store

拿数据请记得使用 this.props！！！而不是this.state

包括函数：

<Button onClick={()=>this.props.ResultClick(record)} type="primary">
复制代码