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

头像
followWinter
    阅读 5 分钟

    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 <div>
            <p>{this.state.counter}</p>
            <button
                onClick={() => {
                    store.dispatch(increment())
                }}>+
            </button>
            <button
                onClick={() => {
                    store.dispatch(decrement())
                }}>-
            </button>
        </div>
    }
}

ReactDom.render(
    <App/>,
    document.getElementById('app')
)
    • 效果

    图片描述

    0x002 原生集成 redux

    • src/index.html

      <!doctype html>
<html>
<head>
    <title>React Study</title>
</head>
<body>
<div id="app">
    <p id="counter">0</p>
    <button id="incrementBtn">+</button>
    <button id="decrementBtn">-</button>
</div>
</body>
</html>

    • 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

    • 源码：

      <template>
    <div id="app">
        <p>{{counter}}</p>
        <button v-on:click="increment">+</button>
        <button v-on:click="decrement">-</button>
    </div>
</template>

<script>
    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)
    export default {
        name: 'app',
        data: function () {
            return {
                counter: 0
            }
        },
        created: function () {
            // 组件创建的时候监听 store 变化, 更新到 data
            this.unSub=store.subscribe(() => {
                this.counter = store.getState()
            })
        },
        beforeDestroy:function(){
            // 组件销毁的时候取消订阅
            this.unSub()
        },
        methods: {
            increment: function () {
                store.dispatch(increment())
            },
            decrement: function () {
                store.dispatch(decrement())
            }
        }
    }
</script>

<style>

</style>
    • 效果和上图一致

    0x004 总结

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

    0x005 资源

    javascriptreactreduxvue.js
    followWinter
    1.5k 声望82 粉丝

    暂时没有

    « 上一篇
    Redux入门0x105: redux 中间件
    下一篇 »
    Redux入门0x107: `react`集成`redux`精讲

    引用和评论

    推荐阅读
    头像
    活用 Git 撤销，提升工程质量（文末招聘）

    followWinter阅读 1.6k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新