草珊瑚的redux使用方式
前言
阮大师写入门教程能力一流。
首推它的Redux三篇入门文章。
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
这三篇文章介绍了，
Redux的基本概念和API，异步操作，以及如何跟React相结合。
文章写得不错，但实践起来还是略显繁琐。
思考
下面提出我自己对Redux结合React使用的思考。
使用ramda库组合自定义中间件。
这使得代码更灵活和透明。异步操作也结合ramda库。
可以不用引入第三方redux-thunk，redux-promise中间件。
使用ramda库更方便组合异步操作。state以React组件的state为准。
redux的state只是辅助计算出React组件的state。往store注入trigger函数，用来setState更新React组件。
在线demo
示例代码如下：
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>Hello world</h1>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import store from './store.js';
import {connect} from './connect.js';
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
value:0,
otherNum:0,
asyncing:false
};
}
dispatch(obj){
obj.state= this.state;
store.dispatch(obj);
}
setOtherData(){
this.dispatch({ type: 'Other' });
}
setData(){
this.dispatch({ type: 'INCREMENT' });
}
async(){
this.dispatch({type: 'Loading' });
this.dispatch({ type: 'ASYNC'});
}
componentDidMount(){
//store.dispatch({type: 'Init'})
}
render() {
const t = this;
console.log('render', store.getState(), t.state);
const {value ,asyncing,otherNum } = t.state;
return (
<div>
<div>数字：{value}</div>
<div onClick={t.setData.bind(this)}>点我+1</div>
{
(()=>{
if(asyncing){
return (<div>异步加载中</div>);
}
else{
return (<div onClick={t.async.bind(t)}>点我异步+10</div>);
}
})()
}
<br />
<div onClick={t.setOtherData.bind(this)}>点我其他数字+1</div>
<div>其他数字：{otherNum}</div>
</div>);
}
}
const NewTest = connect(store)(Test) ;
ReactDOM.render(
<NewTest />,
document.getElementById('app')
)
module.exports = NewTest;
store.js
import { createStore } from 'redux';
import R from 'ramda';
const isPromise = function(e){
return !!e&&typeof e.then=="function";
};
const setTimeout1 = R.curry(function( state ){
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve(state+ 10);
},1000);
})
});
// reducer，仅用于计算。
function counter(state = {}, action) {
if(isPromise(state)){
state = {};
}
state = R.merge(state, action.state);
console.log('reducer中的state',state);
switch (action.type) {
case 'Init':
return action.state;
case 'INCREMENT':
state.value = state.value + 1;
return state
case 'ASYNC':
return R.composeP( setTimeout1)(state.value);
case 'Loading':
return {asyncing: true}
case 'Other':
return {otherNum: state.otherNum+1};
default:
return state
}
}
let store = createStore(counter);
// subscribe，可用于执行含有副作用的操作。
store.subscribe((e) =>{
console.log('subscribe',store, store.getState(),e, this);
let state = store.getState();
if(isPromise(state)){
state.then(function(num){
store.trigger({value: num, asyncing:false });
})
}
else{
store.trigger(store.getState());
}
})
module.exports = store;
connect.js
import {type} from 'ramda';
exports.connect = function (listenable, context) {
if(type(listenable) !== 'Object'){
throw new Error('connect function\'s argument is not a object');
}
listenable.trigger = function (obj,fn) {
this.setState(obj || {}, fn);
};
listenable.getReactState = function(){
return this.state;
};
return function(otherReactClass){
return class baseReactClass extends otherReactClass {
constructor(){
super();
}
componentDidMount(...args) {
context = context || this;
listenable.trigger = listenable.trigger.bind(context);
listenable.getReactState = listenable.getReactState.bind(context);
super.componentDidMount();
}
componentWillUnmount() {
listenable.trigger = null;
super.componentWillUnmount();
}
}
}
}
草珊瑚的redux使用方式的更多相关文章
- 翻译 | Thingking in Redux（如果你只了解MVC）
作者:珂珂(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 原文地址:https://hackernoon.com/thinking-in-redux-when-all-youve-known ...
- redux 与 react-redux
Redux 一.Redux 三大原则: 1.一个应用永远只有一个数据源(整个应用状态都保存在一个对象中,Redux提供的工具函数combineReducers可以解决庞大的数据对象的问题) 2.状态是 ...
- 我所遭遇过的游戏中间件---Redux
我所遭遇过的游戏中间件---Redux 一．关于Redux Substance Redux 是一款纹理处理软件加中间件,专门用于纹理生成和压缩.具其用户指南介绍,它能够对纹理集进行优化,可以将现有压缩 ...
- redux详解
redux介绍 学习文档:英文文档,中文文档,Github redux是什么 redux是一个独立专门用于做状态管理的JS库(不是react插件库),它可以用在react, angular, vue等 ...
- 前端AntD框架的upload组件上传图片时遇到的一些坑
前言 本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 前端做文件上传这个功能,是很有技术难度的.既然框架给我们提供好了,那就直接用呗.结果用的时 ...
- React+DvaJS 之 hook 路由权限控制
博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...
- react的状态管理
近两年前端技术的发展如火如荼,大量的前端项目都在使用或转向 Vue 和 React 的阵营, 由前端渲染页面的单页应用占比也越来越高,这就代表前端工作的复杂度也在直线上升,前端页面上展示的信息越来越多 ...
- react之传递数据的几种方式props传值、路由传值、状态提升、redux、context
react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...
- 使用redux代码文件的组织方式
从架构触发,开始一个新应用的时候,代码文件的组织方式一定要考虑好 如果之前使用过mvc的框架那么对按角色组织方式一定不陌生 角色组织方式 reducer/ todoReducer.js filterR ...
随机推荐
- 使用AJAX技术发送异步请求，HTTP服务端推送
使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于X ...
- c# 类的知识
在英语中类(class)是分类(classification)的根词.设计类的过程就是对信息进行分类,将相关信息放到有意义的实体中. 封装的目的: 封装就是定义类的重要原则.中心思想是:使用类的程序不 ...
- ztree使用实例
一.当某节点被选择或被取消选择时获取所有被选择的节点: <link rel="stylesheet" href="./static/libs/ztree/css/m ...
- [转载]DLL命名规则
程序集是一个部署单元,同时还代表托管代码程序的身份.一般来说一个程序集仅与一个DLL相对应.本节主要讲DLL命名约定,程序集的命名约定与此类似. 要记住,名字空间与DLL和程序集是不同的概念.名字空间 ...
- 八大排序算法之七—堆排序（Heap Sort）
堆排序是一种树形选择排序,是对直接选择排序的有效改进. 基本思想: 堆的定义如下:具有n个元素的序列(k1,k2,...,kn),当且仅当满足 时称之为堆.由堆的定义可以看出,堆顶元素(即第一个元素) ...
- springmvc的ajax返回406问题
在springmvc中ajax请求写为XXX.html,如果在controller的如:@RequestMapping(value="/login/doLogin.html",pr ...
- css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...
- 静态代码检查findbugs/阿里巴巴开发规范
findbugs,基本上三类严重的bug检测出来都是比较准确的,如下: 阿里巴巴开发规范 前面两类都是比较重要的: 参考: https://blog.csdn.net/qq_27093465/arti ...
- Codeforces 903G Yet Another Maxflow Problem - 线段树
题目传送门 传送门I 传送门II 传送门III 题目大意 给定一个网络.网络分为$A$,$B$两个部分,每边各有$n$个点.对于$A_{i} \ (1\leqslant i < n)$会向$A_ ...
- Codeforces 40E Number Table - 组合数学
题目传送门 传送门I 传送门II 题目大意 给定一个$n\times m$的网格,每个格子上要么填$1$,要么填$-1$,有$k$个位置上的数是已经填好的,其他位置都是空的.问有多少种填法使得任意一行 ...