深度理解redux（一）

来源：互联网发布：那英精选.知英情歌编辑：程序博客网时间：2024/06/15 10:35

1、redux作为react技术栈系列中解决数据管理的一种架构，我们非常有必要学会它，理解它。

2、为什么要用redux？很多人很疑惑。有这么一句话，我觉得很经典，就是当你不知道要不要用redux的时候，那就不需要使用redux。只有当你遇到你解决不了的问题的时候，redux可能就是你的解决方案。

3、如果一个人开始学习redux，他最好记住这么一套逻辑，redux的核心是一个数据容器，用store描述，一个相同的store数据容器必定对应一个相同的界面view，一个单页面的应用从用户的角度出发，只能通过用户的行为（使用action描述）来改变数据，而处理用户的这种行为的函数我们叫reducer。

总的来说，就是用户发出action，我们reducer处理用户行为，然后store数据改变，引发界面发生相应的改变。（上面的一段描述非常重要，这是理解redux的关键，不管怎么样，必须有一个整体的印象，没有印象就再读一遍。）

4、redux几乎没有任何强制性的规定，没有教你该怎么写，怎么做，它只提供了少量的API，但是没有强制性规定的东西，才是我们理解的痛点！！redux的一些基本概念如下：

5、store
store是我们创建的数据容器，它是一个对象，里面存放的是我们的数据。它的基本API使用方式如下：

import { createStore } from "redux";const store = createStore(todoApp);//store就是我们创建的数据容器，是一个对象，如果console.log就会发现，它还有一些方法，如比较常用的dispatch()方法，getState()方法等等。//todoApp是我们的reducer函数，用于处理用户action行为。后面会详细说明。

6、action
action是一种描述用户行为的一个对象！！
如何描述用户行为？redux把每个用户的不同操作都描述成为一个带有type属性的对象，类似于：

{    type:"TODO"}

其中，type是这个对象必须有的一个属性，描述的是用户“todo”类型的行为。
一般而言，我们把用户的行为类型定义成常量。像下面这样：

const TODO = "TODO";let action = {    type:TODO,}

7、action creater
一般而言，用户的同种类型的行为很可能携带某些信息，就比如我们购买我们喜欢的衣服，可能一件不够，我多买几件，这样就重复的点击淘宝上的“+”按钮，同一种行为，但是每次有个+1的操作，这时候就是action creater的存在意义了。
action creater是一个函数，可接受参数，返回的是一个action对象。使用方式如下：

const TODO = "TODO";function todo(text){    return {        type:TODO,        text:text    }}

8、reducer
reducer是处理用户行为的函数。它的逻辑就是根据用户的行为，把store里面的数据跟新为新的状态。
old state—>reducer处理（通过action行为）—->new state；
所以这个reducer函数的参数就可想而知了。一个是旧的状态，一个是用户action行为，返回值是新的state。
类似下面这样：

function todos(state=0,action){    switch (action.type){        case "ADD":            return state+1;        case "DEC":            return state-1;        default:            return state;    }}

这个处理函数是这样的，旧的状态是state，用户行为是action，state我们给的初始值是0，也就是我们在什么都不做的情况下，我们存储到store中的数据的值，action是我们用户的行为，它有一个必须的属性type，如果这个type是”ADD”的时候，我们把state更新为state +1，如果是”DEC”的时候，我们把state更新为state-1。默认情况下返回原值state。

这里的todos就是我们之前创建的数据容器，所接受的那个函数，我之前写的是todoApp。

9、在这里，个人觉得有必要再描述一个整体上的运行过程。
我们规定了一种行为叫action，这种行为通过它的属性type进行区分，用户通过这种行为，redux就会自动识别并且处理这种行为，就是上面的reducer函数，从而数据进行更新。

10、到这里，我们还有问题没有解决！用户如何发出这种行为action？数据刷新之后界面如何进行更新？我们如何读取store中的数据？
这就要牵扯到store的一些方法了。
store.getState(),获取store中存储的数据！
store.dispatch(action),发出用户行为。action是个对象，不多说。
store.subscribe(handleEvent),对store中的数据进行监听，如果更新了数据，就会自动触发handleEvent函数，handleEvent是一个回调函数。

11、实践是检验真理的唯一标准，我们看一个示例：
首先要明白一点，redux是一种数据管理的架构，它不针对react，仅仅是很适合react，我们在任何地方都可以使用redux。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script></head><body>    <button id="add">add</button>    <p id="value"></p>    <button id="dec">de</button></body><script>    function reducer(state,action) {        if(state === 'undefined'){            state = 0;        }        console.log(state);        switch (action.type){            case 'ADD':                return state + 1;            case 'DEC':                return state - 1;            default:                return 0;        }    }    var store = Redux.createStore(reducer);//创建store    console.log(store.getState());    var op = document.getElementById('value') ;    renders();//先执行op.innerHTML = store.getState()    //点击行为，描述用户action    document.getElementById('add').onclick = function () {        store.dispatch({type:"ADD"});    }    document.getElementById('dec').onclick = function () {        store.dispatch({type:"DEC"});    }    //subscribe的回调函数    function renders() {        op.innerHTML = store.getState()    }    store.subscribe(renders);//监听</script></html>

这是在js中应用redux的实例，其要点有这么几点
第一、使用redux，必须引入redux库。
第二、创建了reducer函数，有两种行为，”ADD”和”DEC”。
第三、创建了store数据容器。
第四、store.getState()获取数据存入数据。
第五、store.dispatch()发出用户行为action。
第六、store.subscribe()监听数据变动。

阅读全文

1 0