redux学习笔记

折月煮酒 提交于 2020-03-17 14:51:06

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用法:

一、redux

//先创建store
//创建reducer,传给store
在这里插入图片描述

加入调试工具同时:https://github.com/zalmoxisus/redux-devtools-extension

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

在这里插入图片描述

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

this.state.currentpage

之前拿数据要这样拿:
引入就可以使用:
在这里插入图片描述

在这里插入图片描述

二、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">
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!