Redux 学习笔记02——Redux 的基本元素

Redux 的基本元素

想要使用Redux，必需要掌握其中的几个必要元素：Store、State、Action、Reducer。下面咱们会依次介绍这几个元素：git

咱们仍是以上一篇博客中提到的图书馆的例子做为基础：一个图书馆中有不少书，图书馆有管理员，咱们若是想要找书的时候，能够询问管理员书的具体位置，方便咱们快速拿到这本书；咱们想要借书或还书的时候，能够将书交给管理员，而且初始本身的借书卡，让管理员帮助咱们准确地登记，并将归还的书放在准确地位置上。github

大体明白了图书馆的例子，咱们开始介绍Redux的这几个基本的元素。redux

Redux 元素的详细介绍

这一节咱们重点是介绍Redux，让你们对Redux有一个形象的认识。若是你对出现的代码不理解的话，先不要纠结，明白各个元素是怎么会是就好了。下一节咱们会详细讲解Redux的使用，那里会对代码详细说明。markdown

1. Store

Store 就是保存数据的地方，你能够把它当作一个容器，整个应用只能有一个 Store。Redux 提供createStore这个函数，用来生成 Store。函数

import { createStore } from 'redux';
const store = createStore(fn);
复制代码

在图书馆的例子中，整个图书馆就是一个 Store，里面存放着大量的书籍。oop

2. State

Store对象包含全部数据。若是想获得某个时刻的数据，就要对 Store 生成快照。这种时刻的数据集合，就叫作 State。spa

当前时刻的所有 State，能够经过store.getState()拿到。翻译

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

const state = store.getState();
复制代码

在图书馆的例子中，图书馆中某一时刻的书籍状况，对应的就是图书馆这一时刻的State。其实这里咱们彻底能够把State翻译成状态，这更便于咱们理解。code

好比我说：2019年下午14：00的时候，图书馆的状态。那么你就会很清楚地知道我表达地意思是：在2019年下午14：00，图书馆有多少本书籍在馆，在馆的书籍都是放在哪一个位置；有多少本书籍已经借出，借出的书籍在哪些人手中等等。orm

再来看实际项目中的State，Redux管理的数据不少，并且这些数据会发生变化。若是咱们想在一个组件渲染的时候，拿到Redux中当前的数据显示在页面上，那么咱们就可使用 store.getState() 获取这个时刻的数据，而后在组件中进行数据的渲染。在另一个时刻，数据发生了变化，若是咱们再次使用 store.getState() 获取数据渲染组件，那么就会获得不一样的页面。

Redux 规定，一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

3. Action

State 的变化，会致使 View 的变化。可是，用户接触不到 State，只能接触到 View。因此，State 的变化必须是 View 致使的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其余属性能够自由设置，社区有一个规范能够参考。

const action = {
    type: 'borrow_book',
    title: '《明朝那些事儿》'
};
复制代码

上面代码中，Action 的名称是borrow_book，它携带的信息是字符串《明朝那些事》。

能够这样理解，Action 描述当前发生的事情。改变 State 的惟一办法，就是使用 Action。它会运送数据到 Store，而后Store会经过一系列方式对数据进行改变。

回到图书馆的例子中：在图书馆中，咱们做为读者没有权限获取和修改图书馆的数据，只能将咱们的请求告诉图书馆，而后图书馆中的管理员就会来获取或者修改图书馆的数据，而后告诉咱们。

好比咱们发出一个请求：我要找书，我要找的书是《明朝那些事儿》，那么图书馆的管理员会很明确地知道咱们的意图，而后告诉咱们这本书在哪里，你就能够拿到这本书。

拿到这本书以后，你以为还不错，想借回家慢慢阅读，你能够在发出一个请求：我要借书，我借的这本书是《明朝那些事儿》，我借书卡的卡号是20152135。图书馆管理员又会很明确地知道你的意图，而后再图书馆地登记薄上记上你借走了这本书，而后这一时刻，图书馆的书籍数量会减小一本。

在上面的例子中，你发出的请求对应的就是Redux中的Action，具体的对应关系以下所示：

// 我要找书，我要找的书是《明朝那些事儿》
const action_1 = {
    type: 'search book',
    title: '《明朝那些事儿》'
};

// 我要借书，我借的这本书是《明朝那些事儿》，我借书卡的卡号是20152135
const action_2 = {
    type: 'borrow book',
    title: '《明朝那些事儿》',
    myId: '20152135'
};
复制代码

4. Reducer

Store 收到 Action 之后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫作 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 做为参数，返回一个新的 State。

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

回到图书馆地例子中：前面提到过，当咱们在图书馆发出找书请求以后，是图书馆管理员帮助咱们找到书籍的具体位置；在咱们发出借书请求以后，是图书馆管理员帮助咱们修改借阅记录。因此在图书馆的例子中，Reducer就是这位辛劳的图书馆管理员，也只有他才有去那先修改图书馆中的数据。

如今想象一下这个场景：你想借阅《明朝那些事儿》，在此以前你可能已经借了其余的书籍，因此图书馆管理员在帮你借阅书籍以后，会告诉你：你如今已经借了哪些书籍，也就是说管理员会返回给你，当前图书馆中你的借阅记录State。

结合这个场景咱们能够给出Reducer的具体定义实例，如今看不懂不要紧，只要理解Reducer是什么角色，有什么做用就好了。后面会对Reducer作详细的介绍。

// 你发出的action
const action_2 = {
    type: 'borrow book',
    title: '明朝那些事儿',
    myId: '20152135'
};

// 定义你借书以前，图书馆的State
const previousState = {
    allBooks: ["明朝那些事儿", "百年孤独", "盗墓笔记", "红楼梦", "西游记", "三国演义"],	// 在你借书前，图书馆全部藏书
    outBooks: {	// 图书馆的借阅记录
        "20152008": ["法医清明"]，// 其余人的借阅书籍
        "20152135": ["水浒传", "鲁迅文集"]		// 你的借阅书籍
    }
}

// reducer的具体定义
const reducer = (state = previousState, action) => {
    if(action.type === "borrow book") {
        let bookIndex = state.allBooks.indexOf(action.title);
        state.allBooks.splice(bookIndex, 1);	// 删除你要借阅的书籍
        outBooks[action.myId].puhs(action.title);	// 把你借阅的书籍添加到你的借阅记录里面
        
        return state;		// 必定要把处理后的state返回
    }
    return state;
}
复制代码

写在最后

这一篇博客中，以图书馆为例子给你们介绍了Redux中最基本也是最重要的几个元素，了解这几个元素以后，在下篇博客中，给你们介绍如何在React项目中使用Redux。