实现一个简单的Redux

最新推荐文章于 2024-05-24 14:32:05 发布

杏子姐_1024

最新推荐文章于 2024-05-24 14:32:05 发布

阅读量359

点赞数 1

分类专栏： Redux

本文链接：https://blog.csdn.net/weixin_44135121/article/details/88219390

版权

Redux 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、前言

Redux并不是一门语言，也不是一个框架，不过可以理解为是一种数据流框架，而不是我们平常用的React类似的UI框架。Redux更像是一种思想或者设计模式。以数据对象为核心，根据不同的事件类型，响应不同的状态，然后执行状态修改之后的事件。这里其实跟我上一篇的博客，面向过程与面向对象的区别可以结合着看。

先说一下这种思想的步骤：

1. 以数据对象为核心，具体说是数据状态；

2. 分析业务场景，抽取事件类型；

3. 根据不同的事件类型改变相应的状态；

4. 执行改变状态之后的事件。

二、案例

点击一个按钮，使其颜色变成红色，再次点击，恢复原始颜色，以此类推。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>React App</title>
</head>
<body>
<button id="btn">点击改变我的颜色</button>
</body>
<script src="redux.js"></script>
</html>

我们一般会像下面这样写（一种面向过程的编程方式）：

方式1：

//1、获取当前按钮
var btn =document.getElementById('btn');
//2、执行事件
btn.onclick=function () {
    if(btn.style.background == 'red'){
        btn.style.background = '';
    }else {
        btn.style.background = 'red';
    }
};

redux主角上场（面向数据，面向对象的编程方式）：

方式2：

//一、准备阶段
//1.抽取相关数据状态(初始状态)
var stateOri={
    background:''
};
//2.事件类型，分为变成红色（beRed）或恢复（reset）
var action = {
    type:'reset',
    background:''
};
var action1 = {
    type:'beRed',
    background:'red'
};
//3.根据不同的type类型响应不同的状态
function changeState(action,state) {
    switch (action.type){
        case 'beRed':
            return{
                background:action.background,           
            };
        case 'reset':
            return{
                background:action.background,                
            };
        default:
            return state;
    }
}
//4.改变状态之后的执行事件
function changeBg(state) {
    btn.style.background = state.background;
}
//二、实施阶段
//1、封装一个redux，向外暴露出getState（获取state）、dispatch（事件分发）、subscribe（事件订阅）
function createStore(state,reducer) {
    var listeners = [];
    var getState = function () {
        return state;
    };
    var dispatch = function (action) {
        state = reducer(action,state);
        listeners.forEach(function (listener) {
            listener(state);
        })
    };
    var subscribe =function (listener) {
        listeners.push(listener);
    };
    return {getState:getState,dispatch:dispatch,subscribe:subscribe}
}
//2、获取一个redux
var store = createStore(stateOri,changeState);
//3、执行dispatch改变状态
btn.onclick=function () {
    if(store.getState().background==''){
        store.dispatch(action1);
    }else {
        store.dispatch(action);
    }
};
//4、执行改变状态之后的事件
store.subscribe(function () {
    var NewState = store.getState();
    changeBg(NewState);
});

三、总结

1. 在此再深入一下面向过程与面向对象的区别，从本案例看，只是执行一个点击改变颜色，再次点击恢复颜色的动作，以面向过程的思维用以上的方式1显然看起来更简单一些。印证了上一篇面向过程与面向对象的区别中提到的：不是很复杂的需求使用面向过程效率更高。但是如果我们需求比较复杂，不仅要改变背景颜色，还要做其他工作，改变字体颜色，字号，大小，与其他元素交互等等，如果以redux思路使用方式2，只需要根据传入不同的事件类型，改变相应的状态，然后执行改变状态之后的事件。从长远的角度来说，代码会更有利于维护，你只需要围绕数据状态去做一系列的工作。

2. redux思想即为数据状态管理思想，综合以上案例详细说明：

第一步，根据业务场景抽离数据状态（本案例业务场景是点击按钮改成红色，再次点击恢复颜色，那么数据状态就是颜色background）；

第二步，抽离出事件类型（本案例的事件类型有，变成红色beRed和恢复颜色reset）；

第三步，根据不同的事件类型改变状态（如果传入的类型为红色，则返回相应的颜色状态，反之，返回对应的颜色状态）；

第四步，执行改变状态之后的事件（改变颜色状态之后设置btn的颜色）。

杏子姐_1024

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现一个简单的Redux

一、前言Redux并不是一门语言，也不是一个框架，不过可以理解为是一种数据流框架，而不是我们平常用的React类似的UI框架。Redux更像是一种思想或者设计模式。以数据对象为核心，根据不同的事件类型，响应不同的状态，然后执行状态修改之后的事件。这里其实跟我上一篇的博客，面向过程与面向对象的区别可以结合着看。先说一下这种思想的步骤：1. 以数据对象为核心，具体说是数据状态；2. 分...
复制链接

扫一扫