Redux入门0x102: redux 栗子之 counter

Dean 发布于2019-08-23 11:42 / 2171人阅读

摘要：使用使用实现也很简单上诉的代码只需要该两个地方就行了导入修改为这样就行了使用实现使用实现无法复用现有的，但是也很简单声明两个绑定事件总结无资源源码

0x000 概述

这一章讲一些栗子

0x001 原生+redux实现counter

修改模板




    React Study



    0

修改入口文件

import {createStore} from "redux"

// 声明两个 action
const ACTION_NUM_INCREMENT = "ACTION_NUM_INCREMENT"
const ACTION_NUM_DECREMENT = "ACTION_NUM_DECREMENT"

// 声明一个 reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_NUM_INCREMENT: {
            return ++state
        }
        case ACTION_NUM_DECREMENT: {
            return --state
        }
        default : {
            return state
        }
    }
}

let store = createStore(counter)

// 设置监听, 当 reducer 发生改变的时候获取新的 counter, 并更新界面
store.subscribe(() => {
    document.getElementById("counter").innerText = store.getState()
})

// 绑定事件
document.getElementById("btnAdd").addEventListener("click", () => {
    store.dispatch({type: ACTION_NUM_INCREMENT})
})
document.getElementById("btnSub").addEventListener("click", () => {
    store.dispatch({type: ACTION_NUM_DECREMENT})
})

查看浏览器

说明：dispatch其实就是发出一个请求，比如store.dispatch({type: ACTION_NUM_INCREMENT})发出的其实是一个增加的请求，当然这个只是一个名字而已，如何处理还看我们自己，是一个简单的js对象，我们发出这个请求以后，reducer将会受到这个请求，counter中的action对象其实就是你发出的这个东西，经过switch处理以后，将会吧reducer返回值作为新的state保存起来，并通知订阅了store的地方--subscribe的回调函数将会执行。

0x002 使用ledux

使用ledux实现也很简单上诉的代码只需要该两个地方就行了

导入Ledux

import Ledux from "../../0x101-hello-redux/src/ledux";

修改createStore为Ledux.createStore

//redux
// let store = createStore(counter)
//ledux
let store = Ledux.createStore(counter)

这样就行了

0x003 使用MyEvent实现

使用MyEvent实现无法复用现有的，但是也很简单

import MyEvent from "../../0x012-component-communication/src/MyEvent";

// 声明两个 action
const ACTION_NUM_INCREMENT = "ACTION_NUM_INCREMENT"
const ACTION_NUM_DECREMENT = "ACTION_NUM_DECREMENT"

let counter = 0
MyEvent.sub(ACTION_NUM_INCREMENT, () => {
    document.getElementById("counter").innerText = counter
})
MyEvent.sub(ACTION_NUM_DECREMENT, () => {
    document.getElementById("counter").innerText = counter
})
// 绑定事件
document.getElementById("btnAdd").addEventListener("click", () => {
    ++counter
    MyEvent.pub(ACTION_NUM_INCREMENT)
})
document.getElementById("btnSub").addEventListener("click", () => {
    --counter
    MyEvent.pub(ACTION_NUM_DECREMENT)
})

0x004 总结

无

0x005 资源

源码

海外云主机 GPU服务器 Redux redux源码 redux-saga react-redux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97340.html

Router入门0x201: 从 URL 到 SPA

摘要：的全称是统一资源定位符英文，可以这么说，是一种标准，而网址则是符合标准的一种实现而已。渲染器，将组件渲染到页面上。 0x000 概述从这一章开始就进入路由章节了，并不直接从如何使用react-route来讲，而是从路由的概念和实现来讲，达到知道路由的本质，而不是只知道如何使用react-route库的目的，毕竟react-route只是一个库，是路由的一个实现而已，而不是路由本身。 ...

honmaple 2019-08-26 12:20 评论0 收藏0
Redux入门0x106: `react`、`vue`、`原生 js`集成`redux`

摘要：概述之前写的所有关于的文章都是纯粹的，是和框架无关环境无关的，所以我没有将和一起讲，为的是吧和分开，作为独立的个体来分析，提现的是一种思想，而不是一个思维定式。而现在我们可以尝试在中来使用了。 0x000 概述之前写的所有关于redux的文章都是纯粹的redux，是和框架无关、环境无关的redux，所以我没有将redux和react一起讲，为的是吧redux和react分开，作为独立...

BetaRabbit 2019-08-23 12:04 评论0 收藏0
Redux入门0x107: `react`集成`redux`精讲

摘要：这里的其实不需要自己写，已经有好的实现了引入修改组件完整源码组件资源源码 0x000 概述前面虽然简单的讲了如何在react中集成redux，但是那只是简单的讲讲而已，这一章将会仔细讲讲如何在react中使用reudx 0x001 问题分析查看前边的栗子： import {createStore} from redux import React from react import ...

20171112 2019-08-26 12:20 评论0 收藏0
Redux入门0x104: Action Creators

摘要：就为我带来了一种应用状态管理的新思想，其间充斥着许多个概念，等，乍一看头大，等到仔细理解了它的思想，或许就很简单了，也是其中一种。 0x000 概述写长文章有点累啊，偶尔写点短的文章吧 0x001 概念其实很多框架在技术上没有太大的难度，真正难的是思想，思想的突破远远比技术突破难多了。redux就为我带来了一种应用状态管理的新思想，其间充斥着许多个概念，state、reduce等，...

sydMobile 2019-08-23 12:02 评论0 收藏0
Redux入门0x101: 简介及`redux`简单实现

摘要：在我看来它们的关系不会比共用开头更深了，所以我就重新开了一个头，但其实是基于前面写的资源中文文档英文文档官方视频学习历程当初为了学习，看了许多的材料，中途曾经放弃两次，但是最后还是勇敢的拿起了它，现在终于勉强弄懂。 0x000 概述这一章开始讲redux，其实是承接前面的react，但其实作为一个框架来说，redux和react并没有太多的关系，本身是独立存在的。在我看来它们的关系不...

ssshooter 2019-08-23 11:40 评论0 收藏0