一.什么是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的理解与使用的更多相关文章

  1. redux的理解

    Redux 这里介绍下我对Redux的理解,不涉及如何使用Redux. Redux 官网介绍: A predictable state container for JavaScript apps.(一 ...

  2. redux深入理解之中间件(middleware)

    理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initi ...

  3. 对于Redux的理解

    在移动端项目,经常会在不同view中进行传递数据,事件.当事件比较少时,我们可以通过常规的事件流方法,注册,发布事件 进行响应等等.但是项目中一个事件多处响应时候,就会使程序变得相当复杂.在现在的Vu ...

  4. fish redux 个人理解

    fish redux 理解 fish redux是什么 Fish Redux 是一个基于 Redux 数据管理的组装式 flutter 应用框架, 它特别适用于构建中大型的复杂应用. 它的特点是配置式 ...

  5. 对redux的理解

     redux原理 某公司有物流(actionType).电商(actionType).广告(actionType)3块业务,在公司财务系统(state)统一记录着三块业务分别赚取到的资金.某天,电商业 ...

  6. redux 初步理解

    派发一个 action 给 reducer, reducer 生成了一个新的 state; redux 通过 Store 来保存数据, store.getState 获得数据, 而要更新 state, ...

  7. Redux 和 Redux thunk 理解

    1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...

  8. Redux简易理解

    1. createStore(相当于vuex的$store) 这才是数据存储仓库,用来存储初和输出的数据,更vuex$store功能一样 作用:  创建一个 Redux store 来以存放应用中所有 ...

  9. Redux 架构理解

    Redux 是一种前端“架构模式”,是 Flux 架构的一种变种,用来提供可预测的状态管理.虽然经常和 React 一起被提及,但是 Redux 却不仅仅只能用于 React,还可以将其运用到其他前端 ...

  10. react中redux的理解

    定义 redux可以看作是flux的进阶版,主要用于react中公共状态(数据)的管理 redux底层原理 redux有一个createStore方法,这个方法用户创建公共存储空间,createSto ...

随机推荐

  1. ASP.NET Core 3.1 WebApi+JWT+Swagger+EntityFrameworkCore构建REST API

    一.准备 使用vs2019新建ASP.NET Core Web应用程序,选用api模板: 安装相关的NuGet包: 二.编码 首先编写数据库模型: 用户表 User.cs: public class ...

  2. kali设置NAT模式,无法正常上网请试试这个办法

    1.释放网卡: dhclient -r eth0 2.自动获取网络 dhclient -v eth0 3.开启22端口 lsof -i :22 4.打开ssh service ssh start sy ...

  3. Phoenix入门到实战(一)

      问题导读1.你认为Apache Phoenix与HBase的关系是什么?2.Phoenix安装需要哪些软件?3.如何部署Phoenix? Introduction Apache Phoenix i ...

  4. conda 管理包

    查看当前环境已经安装的包 conda list 查看指定环境中的安装包 conda list -n python27 在Anaconda 库中搜索包 conda search numpy #模糊搜索 ...

  5. belongsTo和hasOne的区别

    简单的讲就是,没有太大的区别,只是在逻辑上出现的思想的偏差(逻辑的合理性).belongsTo:可以理解为属于hasOne:可以理解为拥有 首先,我们创建两张表.user表 字段 id name pa ...

  6. 【K8S学习笔记】初识K8S 及架构组件

    K8S是什么?发展历史 Kubernetes (简称 k8s)是 Google 在2014年开源的,对容器生命周期管理的开源平台,致力于对容器集群提供易于管理.高可用.弹性负载与故障转移的能力,提高服 ...

  7. Java学习笔记4(多线程)

    多线程 多个程序块同时运行的现象被称作并发执行.多线程就是指一个应用程序中有多条并发执行的线索,每条线索都被称作一条线程,它们会交替执行,彼此间可以进行通信. 进程:在一个操作系统中,每个独立执行的程 ...

  8. 动态自动配置Bean

    概览 接口Condition 用于基于条件的自动配置,和注解@Conditional配合使用,可实现JavaBean的动态自动配置 自定义实现动态配置Bean 定义一个接口和两个实现类 定义两个Con ...

  9. bugku社工writeup

    最近bugku的web和杂项刷了多半,突然心血来潮想试试社工题,bugku的社工题比较基础,而且题量不多,和大家分享一下writeup. 1.密码 根据提示,多猜几次密码就对了,然后得到flag. 2 ...

  10. 暑假集训Day1 整数划分

    题目大意: 如何把一个正整数N(N长度<20)划分为M(M>=1)个部分,使这M个部分的乘积最大.N.M从键盘输入,输出最大值及一种划分方式. 输入格式: 第一行一个正整数T(T<= ...