24行JavaScript代码实现Redux的方法实例


Posted in Javascript onNovember 17, 2019

前言

Redux是迄今为止创建的最重要的JavaScript库之一,灵感来源于以前的艺术比如Flux和Elm,Redux通过引入一个包含三个简单要点的可伸缩体系结构,使得JavaScript函数式编程成为可能。如果你是初次接触Redux,可以考虑先阅读官方文档。

1. Redux大多是规约

考虑如下这个使用了Redux架构的简单的计数器应用。如果你想跳过的话可以直接查看Github Repo。

1.1 State存储在一棵树中

该应用程序的状态看起来如下:

const initialState = { count: 0 };

1.2 Action声明状态更改

根据Redux规约,我们不直接修改(突变)状态。

// 在Redux应用中不要做如下操作
state.count = 1;

相反,我们创建在应用中用户可能用到的所有行为。

const actions = {
 increment: { type: 'INCREMENT' },
 decrement: { type: 'DECREMENT' }
};

1.3 Reducer解释行为并更新状态

在最后一个架构部分我们叫做Reduer,其作为一个纯函数,它基于以前的状态和行为返回状态的新副本。

  • 如果increment被触发,则增加state.count
  • 如果decrement被触发,则减少state.count
const countReducer = (state = initialState, action) => {
 switch (action.type) {
 case actions.increment.type:
  return {
  count: state.count + 1
  };

 case actions.decrement.type:
  return {
  count: state.count - 1
  };

 default:
  return state;
 }
};

1.4 目前为止还没有Redux

你注意到了吗?到目前为止我们甚至还没有接触到Redux库,我们仅仅只是创建了一些对象和函数,这就是为什么我称其为"大多是规约",90%的Redux应用其实并不需要Redux。

2. 开始实现Redux

要使用这种架构,我们必须要将它放入到一个store当中,我们将仅仅实现一个函数:createStore。使用方式如下:

import { createStore } from 'redux'

const store = createStore(countReducer);

store.subscribe(() => {
 console.log(store.getState());
});

store.dispatch(actions.increment);
// logs { count: 1 }

store.dispatch(actions.increment);
// logs { count: 2 }

store.dispatch(actions.decrement);
// logs { count: 1 }

下面这是我们的初始化样板代码,我们需要一个监听器列表listeners和reducer提供的初始化状态。

const createStore = (yourReducer) => {
 let listeners = [];
 let currentState = yourReducer(undefined, {});
}

无论何时某人订阅了我们的store,那么他将会被添加到listeners数组中。这是非常重要的,因为每次当某人在派发(dispatch)一个动作(action)的时候,所有的listeners都需要在此次事件循环中被通知到。调用yourReducer函数并传入一个undefined和一个空对象将会返回一个initialState,这个值也就是我们在调用store.getState()时的返回值。既然说到这里了,我们就来创建这个方法。

2.1 store.getState()

这个函数用于从store中返回最新的状态,当用户每次点击一个按钮的时候我们都需要最新的状态来更新我们的视图。

const createStore = (yourReducer) => {
 let listeners = [];
 let currentState = yourReducer(undefined, {});
 
 return {
  getState: () => currentState
 };
}

2.2 store.dispatch()

这个函数使用一个action作为其入参,并且将这个action和currentState反馈给yourReducer来获取一个新的状态,并且dispatch方法还会通知到每一个订阅了当前store的监听者。

const createStore = (yourReducer) => {
 let listeners = [];
 let currentState = yourReducer(undefined, {});

 return {
 getState: () => currentState,
 dispatch: (action) => {
  currentState = yourReducer(currentState, action);

  listeners.forEach((listener) => {
  listener();
  });
 }
 };
};

2.3 store.subscribe(listener)

这个方法使得你在当store接收到一个action的时候能够被通知到,可以在这里调用store.getState()来获取最新的状态并更新UI。

const createStore = (yourReducer) => {
 let listeners = [];
 let currentState = yourReducer(undefined, {});

 return {
 getState: () => currentState,
 dispatch: (action) => {
  currentState = yourReducer(currentState, action);

  listeners.forEach((listener) => {
  listener();
  });
 },
 subscribe: (newListener) => {
  listeners.push(newListener);

  const unsubscribe = () => {
  listeners = listeners.filter((l) => l !== newListener);
  };

  return unsubscribe;
 }
 };
};

同时subscribe函数返回了另一个函数unsubscribe,这个函数允许你当不再对store的更新感兴趣的时候能够取消订阅。

3. 整理代码

现在我们添加按钮的逻辑,来看看最后的源代码:

// 简化版createStore函数
const createStore = (yourReducer) => {
 let listeners = [];
 let currentState = yourReducer(undefined, {});

 return {
 getState: () => currentState,
 dispatch: (action) => {
  currentState = yourReducer(currentState, action);

  listeners.forEach((listener) => {
  listener();
  });
 },
 subscribe: (newListener) => {
  listeners.push(newListener);

  const unsubscribe = () => {
  listeners = listeners.filter((l) => l !== newListener);
  };

  return unsubscribe;
 }
 };
};

// Redux的架构组成部分
const initialState = { count: 0 };

const actions = {
 increment: { type: 'INCREMENT' },
 decrement: { type: 'DECREMENT' }
};

const countReducer = (state = initialState, action) => {
 switch (action.type) {
 case actions.increment.type:
  return {
  count: state.count + 1
  };

 case actions.decrement.type:
  return {
  count: state.count - 1
  };

 default:
  return state;
 }
};

const store = createStore(countReducer);

// DOM元素
const incrementButton = document.querySelector('.increment');
const decrementButton = document.querySelector('.decrement');

// 给按钮添加点击事件
incrementButton.addEventListener('click', () => {
 store.dispatch(actions.increment);
});

decrementButton.addEventListener('click', () => {
 store.dispatch(actions.decrement);
});

// 初始化UI视图
const counterDisplay = document.querySelector('h1');
counterDisplay.innerHTML = parseInt(initialState.count);

// 派发动作的时候跟新UI
store.subscribe(() => {
 const state = store.getState();

 counterDisplay.innerHTML = parseInt(state.count);
});

我们再次看看最后的视图效果:

24行JavaScript代码实现Redux的方法实例

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

原文: https://www.freecodecamp.org/news/redux-in-24-lines-of-code/

作者:Yazeed Bzadough

译者:小维FE

Javascript 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 #Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 #Javascript
vue中注册自定义的全局js方法
Nov 15 #Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 #Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 #Javascript
微信小程序自定义导航栏(模板化)
Nov 15 #Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 #Javascript
You might like
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php实现的RSS生成类实例
2015/04/23 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
javascript封装简单实现方法
2015/08/11 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
10款最好的Web开发的 Python 框架
2015/03/18 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
对pandas中to_dict的用法详解
2018/06/05 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
PyTorch实现AlexNet示例
2020/01/14 Python
饭店工作计划书
2014/01/10 职场文书
运动会通讯稿50字
2014/01/30 职场文书
销售主管竞聘书
2014/03/31 职场文书
婚礼答谢词
2015/01/04 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
同事离别感言
2015/08/04 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL