redux

什么是flux?

  • redux的设计思想与flux是差不多一样的,所以我们先来了解什么flux
  • flux是一种设计模式或者说是框架。以mvc模式来划分的话react是mvc中的view, flux相当于mc,m就是model c就是control。那么我们就明白flux到底是什么了
  • flux包含四个部分 Store、Dispatch、Action、View,其中Store就对应着model,Dispatch、Action就组合成了Control。

redux与flux原理是一样的,只是实现不一样。

  1.redux把dispatch封装到了Store里

  2.redux抽象出了一个reducer概念,reducer就是一个根据不同的dispatch处理并产生新的state的一个程序

什么是Redux ?

“Redux 是 JavaScript 状态容器,提供可预测化的状态管理”。

Redux 的设计思想很简单,就两句话:

Web 应用是一个状态机,视图与状态是一一对应的。
所有的状态,保存在一个对象里面。


redux有三大准则

单一数据源


整个应用状态,都应该被存储在单一store的对象树中。


只读状态


唯一可以修改状态的方式,就是发送(dispatch)一个动作(Action),通俗来讲,就是说只有getter,没有setter。
使用纯函数去修改状态,(纯函数是指 不依赖于且不改变它作用域之外的变量状态 的函数,也就是说, 纯函数的返回值只由它调用时的参数决定 ,它的执行不依赖于系统的状态(比如:何时、何处调用它),不知道什么是纯函数 的看这篇文章先自行科普一下,纯函数保障了状态的稳定性,不会因不同环境导致应用程序出现不同情况,听说是redux真正的精髓,日后可以深入了解。
redux的几个概念
(1)Action
Action是唯一可以改变状态的途径,服务器的各种推送、用户自己做的一些操作,最终都会转换成一个个的Action,而且这些Action会按顺序执行,这种简单化的方法用起来非常的方便。Action 是一个对象。其中的type属性是必须的,表示 Action 的名称:

const action = {
    type: 'login',
    payload: ...,
    ...
}; 


(2)Store
Store管理着整个应用的状态,store可以理解为一个存储数据的仓库,一个应用就这么一个仓库,但本质上这个store是一个对象。 Redux通过 createStore 这个函数,来生成store对象:

import { createStore } from 'redux';
const store = createStore(fn);


Store提供了一个方法dispatch,这个就是用来发送一个动作,去修改Store里面的状态

store.dispatch({
  type: 'login',
  payload: '...'
});


然后可以通过getState方法来重新获得最新的状态,也就是state。

简洁介绍 state

  state就是当前的状态,那么store和state是什么关系呢? 我们可以认为 store 对象包括所有数据,如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。 

  通过 store.getState() 我们可以得到某一时点的 state。

import { createStore } from 'redux';
const store = createStore(fn);
 
const state = store.getState();


  Redux 规定, 一个 State 对应一个 View。只要 State 相同,View 就相同

  简单的说: getState() 会返回当前的state树。(当前很重要)。 即state是当前数据的状态。 

(3)Reducer
当dispatch之后,getState的状态发生了改变,Reducer就是用来修改状态的。Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。(例子https://www.cnblogs.com/zhuzhenwei918/p/7245343.html)

const reducer = function (state, action) {
  // ...
  return new_state;
};

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值