Redux的理解与使用
一.什么是Redux?
Redux是一个第三方状态管理的js库,它不仅仅可以适用于react框架,还可以用于其他的vue,auglar等框架。只不过react的生态中不包括一个状态管理的库而已,所以与react配合使用较为好。
二.神魔时候要使用Redux来管理状态
当我们多个组件共享状态的时候最好使用Redux来管理,方便组件间数据的共享。当咱们没有涉及组件间数据共享的时候尽量不要使用Redux
二.Redux的三个核心要素
1. actions
actions可以说是一个让reducer执行不同函数的supporter, 它为reducer传入type来让reducer来执行不同的修改数据方式,并且把data传给reducer。所以actions的类型要是一个对象,并且咱们可以把actions抽离出去封装到一个工厂函数中如下:
/*./redux/actions.js*/
export const increament = (num)=> {
return {
type: 'INCREAMENT', //type属性由于要跟reducer中的相同所以我们可以把它抽离出去./redux/actions-type.js
data: num
}
}
2.reducer
reduce是一个返回state的纯函数,里头要对state的值进行处理。
/*./redux/reducer.js*/
export default count = (state=0, action)=> { //state需要在这里直接赋予默认值,因为每个状态都有初始状态
switch (action.type) {
case "INCREMENT":
return state + 1
default:
return state
}
}
3.Store
store是一个连接state,reducer的仓库,其中提供了三种api供我们来操作
- store.getState() : 用来获取仓库中数据,返回state
- store.dispitch(action): 用来调用reducer来修改state, action需要传入的类型是一个对象
- store.subscribe(()=> {}): 当store中的数据改变时会进行调用, 由于store中数据改变不会使页面重新渲染,所以我们在入口文件中可以把reactDom.render()放入其中来实现类似于数据响应式的作用。
/*./redux/store.js*/
import {createStore} from 'redux'
import reducer from './reducer.js/
export const count = createStore(reducer)
//然后在index.js的入口文件中引入,通过属性赋值传递给需要的组件
Redux的理解与使用的更多相关文章
- redux的理解
Redux 这里介绍下我对Redux的理解,不涉及如何使用Redux. Redux 官网介绍: A predictable state container for JavaScript apps.(一 ...
- redux深入理解之中间件(middleware)
理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initi ...
- 对于Redux的理解
在移动端项目,经常会在不同view中进行传递数据,事件.当事件比较少时,我们可以通过常规的事件流方法,注册,发布事件 进行响应等等.但是项目中一个事件多处响应时候,就会使程序变得相当复杂.在现在的Vu ...
- fish redux 个人理解
fish redux 理解 fish redux是什么 Fish Redux 是一个基于 Redux 数据管理的组装式 flutter 应用框架, 它特别适用于构建中大型的复杂应用. 它的特点是配置式 ...
- 对redux的理解
redux原理 某公司有物流(actionType).电商(actionType).广告(actionType)3块业务,在公司财务系统(state)统一记录着三块业务分别赚取到的资金.某天,电商业 ...
- redux 初步理解
派发一个 action 给 reducer, reducer 生成了一个新的 state; redux 通过 Store 来保存数据, store.getState 获得数据, 而要更新 state, ...
- Redux 和 Redux thunk 理解
1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...
- Redux简易理解
1. createStore(相当于vuex的$store) 这才是数据存储仓库,用来存储初和输出的数据,更vuex$store功能一样 作用: 创建一个 Redux store 来以存放应用中所有 ...
- Redux 架构理解
Redux 是一种前端“架构模式”,是 Flux 架构的一种变种,用来提供可预测的状态管理.虽然经常和 React 一起被提及,但是 Redux 却不仅仅只能用于 React,还可以将其运用到其他前端 ...
- react中redux的理解
定义 redux可以看作是flux的进阶版,主要用于react中公共状态(数据)的管理 redux底层原理 redux有一个createStore方法,这个方法用户创建公共存储空间,createSto ...
随机推荐
- ASP.NET Core 3.1 WebApi+JWT+Swagger+EntityFrameworkCore构建REST API
一.准备 使用vs2019新建ASP.NET Core Web应用程序,选用api模板: 安装相关的NuGet包: 二.编码 首先编写数据库模型: 用户表 User.cs: public class ...
- kali设置NAT模式,无法正常上网请试试这个办法
1.释放网卡: dhclient -r eth0 2.自动获取网络 dhclient -v eth0 3.开启22端口 lsof -i :22 4.打开ssh service ssh start sy ...
- Phoenix入门到实战(一)
问题导读1.你认为Apache Phoenix与HBase的关系是什么?2.Phoenix安装需要哪些软件?3.如何部署Phoenix? Introduction Apache Phoenix i ...
- conda 管理包
查看当前环境已经安装的包 conda list 查看指定环境中的安装包 conda list -n python27 在Anaconda 库中搜索包 conda search numpy #模糊搜索 ...
- belongsTo和hasOne的区别
简单的讲就是,没有太大的区别,只是在逻辑上出现的思想的偏差(逻辑的合理性).belongsTo:可以理解为属于hasOne:可以理解为拥有 首先,我们创建两张表.user表 字段 id name pa ...
- 【K8S学习笔记】初识K8S 及架构组件
K8S是什么?发展历史 Kubernetes (简称 k8s)是 Google 在2014年开源的,对容器生命周期管理的开源平台,致力于对容器集群提供易于管理.高可用.弹性负载与故障转移的能力,提高服 ...
- Java学习笔记4(多线程)
多线程 多个程序块同时运行的现象被称作并发执行.多线程就是指一个应用程序中有多条并发执行的线索,每条线索都被称作一条线程,它们会交替执行,彼此间可以进行通信. 进程:在一个操作系统中,每个独立执行的程 ...
- 动态自动配置Bean
概览 接口Condition 用于基于条件的自动配置,和注解@Conditional配合使用,可实现JavaBean的动态自动配置 自定义实现动态配置Bean 定义一个接口和两个实现类 定义两个Con ...
- bugku社工writeup
最近bugku的web和杂项刷了多半,突然心血来潮想试试社工题,bugku的社工题比较基础,而且题量不多,和大家分享一下writeup. 1.密码 根据提示,多猜几次密码就对了,然后得到flag. 2 ...
- 暑假集训Day1 整数划分
题目大意: 如何把一个正整数N(N长度<20)划分为M(M>=1)个部分,使这M个部分的乘积最大.N.M从键盘输入,输出最大值及一种划分方式. 输入格式: 第一行一个正整数T(T<= ...