Redux入门0x106: `react`、`vue`、`原生 js`集成`redux`

BetaRabbit 发布于2019-08-23 12:04 / 2440人阅读

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

0x000 概述

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

0x001 react集成redux栗子-counter

源码

import {createStore} from "redux"
import React from "react"
import ReactDom from "react-dom"

//reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return state + 1
        case ACTION_DECREMENT:
            return state - 1
        default:
            return state
    }
}
// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

// store
const store = createStore(counter)

// 组件
class App extends React.Component {
    constructor() {
        super()
        // 初始化 state
        this.state = {
            counter: 0
        }
        // 监听 store 变化, store 变化的时候更新 counter
        store.subscribe(() => {
            this.setState({
                counter: store.getState()
            })
        })
    }
    // 组件销毁的时候取消订阅
    componentWillUnmount(){
        this.unSub()
    }
    render() {
        return 
            {this.state.counter}
            
            
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

效果

0x002 原生集成 redux

src/index.html




    React Study



    0

src/index.js

import {createStore} from "redux"
//reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return state + 1
        case ACTION_DECREMENT:
            return state - 1
        default:
            return state
    }
}
// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

// store
const store = createStore(counter)

// 初始化一些 dom 变量
let counterP = document.getElementById("counter")
let incrementBtn = document.getElementById("incrementBtn")
let decrementBtn = document.getElementById("decrementBtn")

// 监听变化, 在 store 变化的时候修改计数器显示
store.subscribe(() => {
    counterP.innerText = store.getState()
})
// 添加点击事件, 当+被点击的时候修改 state
incrementBtn.onclick = () => {
    store.dispatch(increment())
}
// 添加点击事件, 当-被点击的时候修改 state
decrementBtn.onclick = () => {
    store.dispatch(decrement())
}

效果和上图一致

0x003 vue集成redux

源码：

效果和上图一致

0x004 总结

redux是独立的，就和react、vue一样都是独立的框架，如何组合他们是我们的选择，而不是必然和唯一的，要让框架成为我们的生产力工具，而不是束缚我们的存在。

0x005 资源

源码

GPU云服务器云服务器 react-redux React_Redux_Appointm react-router-redux Redux

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

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

Redux入门0x101: 简介及`redux`简单实现

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

ssshooter 2019-08-23 11:40 评论0 收藏0
前端每周清单半年盘点之 React 与 ReactNative 篇

摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

Barry_Ng 2019-08-22 10:54 评论0 收藏0
前端学习资源

摘要：提供了完整的环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。 react 新特性 react16 Context 算法相关图解排序算法(二)之希尔排序微信小程序微信小程序组件化的解决方案移动端尺寸基本知识浏览器前端必读：浏览器内部工作原理浏览器缓存原理解读浏览器加载css和js及dom解析之间的关系浏览器缓存 CSS学习移动web开发布局入...

zhisheng 2019-08-20 13:33 评论0 收藏0
从 1 到完美，用 js 和 react-native 写一个 APP

摘要：从到完美，用和写一个在年开源了后，紧接着在年就又开源了，就此打开了用和前端技术写原生之路。对应来看，程序只有两个部分，和，而部分则分为组件和。所以，在端的纯库无在中同样适用，如等。应用实例便是使用开发的一个日记。从 1 到完美，用 js 和 react-native 写一个 APP facebook 在 2013 年开源了 react 后，紧接着在 2015 年就又开源了 react...

CollinPeng 2019-08-23 11:45 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0