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 ...
随机推荐
- @loj - 2977@ 「THUSCH 2017」巧克力
目录 @description@ @solution@ @accepted code@ @details@ @description@ 「人生就像一盒巧克力,你永远不知道吃到的下一块是什么味道.」 明 ...
- (一)DB、DBMS、SQL之间的关系
一.概念 DB:数据库(database)相当于一个仓库,用于有组织的采存储数据. DBMS:数据库管理系统(database manage system)数据库是通过DBMS来创建和操作,种类很多( ...
- Linux下自己和自己用各种方法进行文件的上传下载
环境: Ubuntu 16.04 1.SCP # 上传 scp /home/sea/Desktop/test.sh sea@192.168.1.31:/home/sea/Desktop/test.sh ...
- web api(基于NFine框架) 中接口跳转数据格式错误解决方案
using NFine.Code; using NFine.Domain; using System.Web.Http; using Newtonsoft.Json; namespace Api.Co ...
- Web前端 -- Webpack
一.Webpack Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 二.Webpack安装 1.全局安装 npm i ...
- Linux文件目录和访问权限
前言 本文知识点是曾经学习过程中收录整理的,方便学习使用,并非在下撰写. 一>Lniux目录结构 /:根目录,一般根目录下只存放目录,在Linux下有且只有一个根目录.所有的东西都是从这里开始. ...
- linux 上设置mysql开机自启
此方式是通过安装包安装的,如果是yum安装的rpm包,可参考yum安装MySQL8.0 三个月之前安装的mysql,记得是设置了开机自启,但是今天再次进入的时候发现,无法登录,报错如下 原因是mysq ...
- [ C++ ] 勿在浮沙筑高台 —— 内存管理(9~16p)primitives(下)
per-class allocator 2 tips: operator new重载 不会被派生类实际使用,因为父类大小内存的分配交给子类去调用明显是不正确的.实际上会被转交至 : : operato ...
- JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建
1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块 图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包 我们来看看对应的数据库表t_book CREATE TABL ...
- 慕课网--mysql开发技巧一 学习笔记
现在存在下面的两张表,表的结构如下所示 师徒四人表结构:id,user_name,over数据:id user_name over1 唐僧 旃檀功德佛2 猪八戒 净坛使者3 孙悟空 斗战胜佛4 沙僧 ...