redux超易学三篇之一(单独说redux)
发布日期:2021-08-15 09:34:11 浏览次数:1 分类:技术文章

本文共 2137 字,大约阅读时间需要 7 分钟。

redux其实非常简单。当复杂的步骤被拆分,其实每一步都是很容易的。

Github:

本文在 create-react-app 中的 index.js 随便引入了一下。

(其实不必如此。测试环境支持 export/import 即可开展)

其实,redux不过就是一个数据库罢了。


action + reducer + store

行为 + 规则 + 历史/结果。

以追女孩子为例子

想寻你喜欢的女孩子。你想好了你要怎么做,你仿佛也看到了这么做的后果。 那么,你准备好开始了吗?


1.action (我们在行为中添加一个 固定的常量来命名,来诠释我们的生命)

你的每一个行为,依据规则,进行执行,从而改变了你的人生轨迹。

action 是我们定义的行为结构。由 type 和 你自己定义的数据构成的一个对象。

// 一些变量罢了。export const MIRACLE = 'MIRACLE';export const GROW = 'GROW';export const PEOPLETAG = {    student: 'student',    adult: 'adult',    child: 'child'};// 也许你不曾创造奇迹,但,有何不可?export const makeMiracle = (text) => {    return {        type: MIRACLE,        text    };};// 人类的成长行为export const startGrow = (growType) => {    return {        type: GROW,        growType    };};

成长 是我们生命中必定会进行的行为,时间让我们成长。

2.reducer (有时候,努力并不一定会成功,我们要顺应规则。或者,打破规则。reducer是我们的规则。)

reducer 是我们定义的一个 行为对应的规则。你的行为会给你带来什么改变?

import {GROW, MIRACLE, PEOPLETAG} from './actions';import {makeMiracle, startGrow} from './actions';// 人生的一开始,是一张白纸const whitePaper = {    girlFriend: [],    miracle: [],    identity: PEOPLETAG.child};// 于是我们人生的旅途开始了export const YourLife = (state = whitePaper, action) => {    switch (action.type) {        case GROW:            return Object.assign({}, state, {                identity: action.growType            });        case MIRACLE:            return Object.assign({}, state, {                miracle: [                    ...state.miracle,                    {                        text: action.text                    }                ]            });        default:             return state;    }};

3.store (每个人的历史都值得被尊重。你就是你,唯一的你。)

store是 一个完善的 人生系统。它是 action 和 reducer 的实际操作。

想寻你喜欢的女孩子。你想好了你要怎么做,你仿佛也看到了这么做的后果。 那么,你准备好开始了吗?
import {createStore} from 'redux';import {YourLife} from './reducer';import {PEOPLETAG} from './actions';import {makeMiracle, startGrow} from './actions';let store = createStore(YourLife);// 监听人生的每一次变化const unsubscribe = store.subscribe(() => {    console.log(store.getState());});store.dispatch(makeMiracle('做了一个mad'));// 人长大了store.dispatch(startGrow(PEOPLETAG.adult));// 停止监听unsubscribe();

转载于:https://www.cnblogs.com/can-i-do/p/9183867.html

转载地址:https://blog.csdn.net/weixin_30757793/article/details/99653258 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Dreamweaver 中CSS代码格式化
下一篇:【转】Chrome开发者工具详解

发表评论

最新留言

不错!
[***.144.177.141]2024年04月20日 22时03分24秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

这是什么“虎狼之词”啊!!!程序员的健康问题,看一线老中医怎么说!!! 2019-04-27
打开我的收藏夹 -- Python数据分析杂谈 2019-04-27
上手Pandas,带你玩转数据(1)-- 实例详解pandas数据结构 2019-04-27
上手Pandas,带你玩转数据(2)-- 使用pandas从多种文件中读取数据 2019-04-27
上手Pandas,带你玩转数据(3)-- pandas数据存入文件 2019-04-27
爬虫遇上不让右击、不让F12的网站,该怎么办? 2019-04-27
上手Pandas,带你玩转数据(4)-- 数据清洗 2019-04-27
上手Pandas,带你玩转数据(5)-- 数据转换与数据定位 2019-04-27
上手Pandas,带你玩转数据(6)-- 摆脱对pandas可视化丑图的刻板印象吧 2019-04-27
从零开始,学会Python爬虫不再难!!! -- (1)开篇:初识爬虫,基础铺垫 丨蓄力计划 2019-04-27
从零开始,学会Python爬虫不再难!!! -- (2)承接:解析网页,抓取标签 丨蓄力计划 2019-04-27
AttributeError: module ‘urllib‘ has no attribute ‘quote‘的解决办法 2019-04-27
linux shell — 6.初识 EXT2 文件系统 2019-04-27
Java — String(字符串) 2019-04-27
linux shell — 7.linux 磁盘与文件系统管理 2019-04-27
linux shell — 8.linux 磁盘与文件系统管理(2) 2019-04-27
Java — 事件监听、事件处理 初体验 2019-04-27
linux — Centos 7(第一天) 使用时出现的问题及解决方法 2019-04-27
数据结构 — 图的概述 2019-04-27
Centos 7 上 Eclipse 无法输入中文解决方法 2019-04-27