通过实现一个 tab 切换功能了解 Redux

前言

对于前端开发来说，Redux 这个概念一定不会陌生。但是很少有人对它非常熟悉，或者说对它理解透彻。在程序界，或者机器语言界，对于新技术，或者工具，或者语法的理解。莫过于从两个角度出发。一、思考它的作用；二、实践，通过它去解决实际问题。如果这两点做到了，对它的理解基本就达成了。以下就是通过思考 Redux 的用途和实际案例来了解 Redux。

一、Redux 解决了什么核心问题

首先明白一点，Redux 跟 React 是没有任何关联的，只不过在 React 中使用 Redux 的场景最频繁。在使用的过程中，需要下载 redux 模块和 react-redux 模块，其中 redux 是独立存在的，而 react-redux 是为了在 react 中使用 redux 做的桥接。

既然 Redux 在 React 中使用得最频繁，那么 Redux 在 React 中到底扮演着什么样的角色，起到什么样的作用呢。
我们都知道 Redux 是一个状态管理工具，而在 React 框架中， 数据流动不是很方便，只能父子组件，或者兄弟组件的通讯是比较方便的，没有层级关系的组件之间想要通讯非常麻烦，更重要的是，React 内部没有提供统一的状态管理机制。

通过以上分析，我们梳理出 redux 在 react 中解决的问题是：
1. 非层级关系组件之间的通讯；
2. 提供统一集中的状态管理工具。

二、实例说明

在 react 中封装一个 tab 切换组件。
现在假设一个场景，切换到第三个 tab 检测到没有登录，所以跳转到登录页面。登录成功之后返回到第二个 tab 页。
功能1:点击对应的 tab，改变其样式，并切换到对应的内容页。

功能2:点击到第三个 tab，检测到未登录，跳转到登录页。

功能3:点击登录页内容，跳转到第二个 tab 页。

三、实例代码

tabs.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import activeAction from './activeKeyAction';
import '../css/common.css';
class Tabs extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount(){
        self.slideWidth = window.innerWidth/this.props.children.length;
        const {dispatch,changeReducer} = this.props;
        if(changeReducer.activeKey == ''||changeReducer.activeKey == undefined){
            dispatch(activeAction(this.props.activeKey));
        }
        this.refs.line.style.width = self.slideWidth;
        this.refs.line.style.transform = "translateX("+ self.slideWidth * (changeReducer.activeKey-1) +"px)";
        this.refs.line.style.transition = "transform 0s";
    }
    changeTab(key,index) {
        const {dispatch, changeActive} = this.props;
        this.refs.line.style.transform = "translateX("+ self.slideWidth * index +"px)";
        this.refs.line.style.transition = "transform .3s";
        dispatch(activeAction(key));
        if (changeActive) {
            changeActive(key);
        };
    }
    render() {
        const {changeReducer} =this.props;
        console.log(changeReducer);
        return (
            <div>
                <div className="tabs">
                    <div className="line" ref="line"></div>
                    {this.props.children.map((item,index)=>{
                        return(<div style={{color:item.key==changeReducer.activeKey?'red':''}} onClick={()=>this.changeTab(item.key,index)}>
                            {item.props.label}
                        </div>)
                    })}
                </div>
                {this.props.children.map((item,index)=>{
                    if(item.key==changeReducer.activeKey){
                        return(<div>{item.props.children}</div>)
                    }else {
                        return null
                    }
                })}
            </div>
        )
    }
};
export default connect((state) => {
    const {changeReducer} = state;
    return {
        changeReducer,
    }
})(Tabs);

tabPane.js

import React, {Component} from 'react';
export default class TabPane extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <div>{this.props.children}</div>
            </div>
        )
    }
};

index.js

import React, {Component} from 'react';
import Tabs from './tabs';
import TabPane from './tabPane';
import One from './One';
import Two from './Two';
import Three from './Three'
export default class Index extends Component {
    constructor(props) {
        super(props);
    }
    goNext(key) {
        if (key == "3") {
            this.props.history.push({pathname: 'login'});
        }
    }
    render() {
        return (
            <Tabs activeKey="1" changeActive={(key) => {
                this.goNext(key)
            }}>
                <TabPane label="tab1" key="1"><One/></TabPane>
                <TabPane label="tab2" key="2"><Two/></TabPane>
                <TabPane label="tab3" key="3"><Three/></TabPane>
            </Tabs>
        )
    }
};

login.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import activeAction from './activeKeyAction';
class Login extends Component {
    goNext(){
        const {dispatch} = this.props;
        dispatch(activeAction("2"));
        this.props.history.push({pathname: 'index'});
    }
    render(){
        return <div className="login"  onClick={()=>this.goNext()}>我是登陆页面,点我跳到第2个tab页</div>
    }
}
export default connect((state) => {
    const {changeReducer} = state;
    return {
        changeReducer,
    }
})(Login);

四、示例分析

在本案例中，实现 tab 切换功能很容易。但是要从登录页跳转回第二个 tab 页面。如果不用 Redux，实现的步骤是：

1. 跳转到 index 页面，携带需要切换的参数过去；
2. 在 this.state 中添加变量接收这个参数；
3. 将这个变量通过 props 传到父组件中；
4. 父组件接收参数。

但是如果使用 Redux ，则只需要跳转到 index 页面，然后通过 dispatch 分发状态即可。因为所有的状态集中在顶层，只要修改了状态，则其他地方都会相应地发生改变。

五、总结

1. Redux 的核心功能就是状态管理，将所有的状态集中在顶层统一管理。这样一来，一旦局部发生变化，其他使用到该变量的地方也会相应发生改变。
2. React 中的组件通讯传值，只能通过层层传递的形式，这就意味着组件之间需要使用变量接收，然后根据业务逻辑做判断。所以正好缺少像 Redux 这样的状态管理工具。
3. 学习 Redux 的时候有这样一句话，如果你在考虑是否需要使用 Redux ，那么你最好不要使用它。这句话的意思是说 Redux 只是用在需要使用的场合，比如跨组件通讯，跨组件修改状态等等。