Redux框架简介

最新推荐文章于 2024-08-04 13:48:51 发布

零度anngle

最新推荐文章于 2024-08-04 13:48:51 发布

阅读量4.1k

点赞数 1

分类专栏： ReactJS 文章标签： redux react

ReactJS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

通过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

用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应该不在话下。