React是个非常适合组件化开发的框架，可以说facebook重新定义了前端。但项目中实际使用下来，维护各组件的state是件比较头疼的事情。尤其页面交互比较复杂时，各种render，你都搞不清楚到底发生了什么，系统复杂到难以维护。还有一个问题就是React的非父子组件间的通信，如某些各组件都要用到的共享状态，没有一个统一的类似管理中心的地方，出了问题难以溯源到哪个组件改了这个state。Redux就是帮助你解决这些痛点，帮助你管理state。请牢记在心，学习一样新东西，了解它诞生的原因，能解决什么痛点，对你的学习帮助很大。
本篇不打算零基础介绍Redux，基础知识请自行参阅英文官网，中文版，阮老师的入门教程
根据官网，Redux有三大原则：
1.单一数据源。整个应用的state都被存储在一个名为store的object树中。这个理念是正确的，但实际应用中，也不必太教条。例如一些仅限React组件内部使用的，纯展示用的state可以不必存储到store中。以我目前对Redux的理解，我倾向于只在store里存储各组件间有交互依赖关系的state。
2.Store里的state是只读的。只能通过分派Action通过Reducer来修改存在Store里的state。Action的本质是个描述已发生事件，能携带数据的plain object。作用是告知Reducer该更新Store里哪些state。
3.使用纯函数来执行修改state。即在Reducer里修改state。Reducer接收两个参数：旧的state和Action，返回一个新的state。它应该是个纯函数：只要有相同的参数，就一定能得到相同的返回值。这个理念是正确的，虽然你在Reducer里做一些不纯的操作也不会报错，但不建议这么做。
初始化Redux整体状态流转，如图：
通过Redux的createStore方法来生成Store。createStore方法的参数是Reducer方法（可以用combinReducers方法将多个Reducer合并起来，将业务数据拆分的更清晰）。Reducer方法接收两个参数state和Action。生成完store对象后，需要用subscribe方法注册回调函数listener，当store内的state发生变化时会自动调用回调函数。回调函数内可以通过getState方法取得最新的state。
初始化完成后。用户要想修改Store里的state，只能通过dispatch方法，该方法接收Action作为参数。Reducer收到Action后，修改相应的state。进而触发初始化过程中注册的listener回调函数。如图：
用Redux写了个教程，源代码已上传Github。第一篇源代码请参照src/originRedux文件夹：
import React, { Component } from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Button } from 'antd';
import 'antd/dist/antd.css';
import './originRedux.pcss';
const reducer = (state, action) => {
if (typeof state === 'undefined') {
return 0;
}
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
case 'CLEAR_NUM':
return 0;
default:
return state;
}
};
const store = createStore(reducer);
const update = () => {
const valueEl = document.getElementsByClassName('numValue');
valueEl[0].innerHTML = store.getState().toString();
};
store.subscribe(update);
export default class Number extends Component {
addNum = () => {
store.dispatch({ type: 'INCREMENT' });
};
minusNum = () => {
store.dispatch({ type: 'DECREMENT' });
};
clearNum = () => {
store.dispatch({ type: 'CLEAR_NUM' });
};
render() {
return (
<div className="wrap">
<h3>origin Redux</h3>
Current Number: <span className="numValue">0</span>
<div>
<Button size="large" className="numBtn" onClick={this.addNum}>+</Button>
<Button size="large" className="numBtn" onClick={this.minusNum}>-</Button>
<Button size="large" className="numBtn" onClick={this.clearNum}>clear</Button>
</div>
</div>
);
}
}
render(
<Number />,
document.getElementById('app'),
);
去除空行甚至不满50行，干脆全贴上来了，代码应该不难理解。Redux为了更好地和React结合，推出了react-redux包，后几篇会介绍。但这里第一个例子中使用React仅仅是为了方便，你完全可以将例子中React代码改写成jQuery。Redux并不是React专用框架~
后几篇会陆续介绍Action，Reducer，React-Redux，异步操作中间件，跟着源代码启蒙Redux应该不在话下
网友评论