React、Redux 和 Bootstrap

使用 React、Redux 和 Bootstrap 实现 Alert

今天，我们来学习使用 React、Redux 和 Bootstrap 实现Alert。

例子

这个例子实现了弹出不同类型信息的功能，这些信息默认会在5秒后消失，你也可以手动点击使其消失。如果你在服务端有信息要提示，还可以通过 Redux 的单一数据源传到客户端在渲染页面时显示出来。

源代码：

https://github.com/lewis617/react-redux-tutorial/tree/master/r2-bs-alert

安装：

npm i

开发环境下运行：

npm start

生产环境下构建：

npm run build

测试：

npm test

为何使用 Redux ？

React 有自己的局部状态（Local State），可以帮助我们在不同状态下渲染不同的界面。那么实现 Alert 为何要使用 Redux ？众所周知，Alert 通常都是要在程序中全局使用的：

• 用户操作可能会发出 Alert。
• 网络请求等异步事件的处理器（Event Handler）可能会发出 Alert。
• 甚至服务器渲染页面时，也可能会给客户端带来一个Alert（比如，你提交表单出错了，服务器重定向到表单页面，并显示错误提示）。

知道了 Alert 要全局使用，我们再来看 Redux。Redux 有一个全局单一的数据源，这个数据源可以通过 react-redux 连接到程序的任意一个组件。不但如此，更新这个数据源的 action，也可以全局使用：

• 用户操作可以发起 action。
• 网络请求等异步事件的处理器（Event Handler）可能会发起 action。
• 甚至在服务器端也可以发起 action，然后将单一数据源传给客户端继续使用。

Redux 牛逼的设计让处理全局状态变得特别方便，实现 Universal 渲染（有些人喜欢叫SSR，但我觉得不准确）也变得非常容易。这与实现 Alert 的需求非常吻合，因此，本文通过 Redux 来辅助实现 Alert。

从另一个方面来说，一些不在全局使用的组件和功能，一般使用React的局部状态就可以了，切记不要什么功能都用 Redux 实现。

了解了为何要使用 Redux，我们就开始动工吧！

快速创建项目

搭建一个 React APP 的成本是很高的，你需要：

• 使用 Webpack 打包。
• 使用 Babel 编译。
• 搭建开发服务器。
• 使用 ESLint 进行语法检查。
• 使用 Mocha 或 Jest 进行测试。
• ……

很多人诟病这一点，不过这些东西都是重复性的体力活，社区早就造好了轮子，来提高生产力。本文就使用了 create-react-app 来快速搭建项目。All you need is these command:

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

然后上述所有东西就都有了！

注意，要将 npm 设为淘宝源或你自己公司的私有 npm 源（只要快就行），否则速度会非常慢，甚至可能导致安装失败。

接下来，我们就开始编写代码。

设计编写 Redux

在一个 React 与 Redux 中的程序中，React 负责程序界面，而 Redux 负责程序功能。由于本例界面比较容易，所以我们先来设计 Redux。

我们期望的Alert 的功能包括：

• 显示一条信息。
• 隐藏一条信息。
• 显示一条信息，过几秒自动隐藏。
• 如果服务器传来有信息，在页面渲染完，过几秒也自动隐藏。

功能明确了，让我们把它们写成函数：

• alertShow
• alertHide
• alertMessage
• hideAllAlert

src/alert/redux.js

export const ALERT_SHOW = 'ALERT_SHOW';
export const ALERT_HIDE = 'ALERT_HIDE';

export function alertShow(messageText, messageType, key) {
  return {
    type: ALERT_SHOW,
    payload: {
      messageText, messageType, key
    }
  };
}

export function alertHide(key) {
  return {
    type: ALERT_HIDE,
    payload: { key }
  };
}

export function alertMessage(messageText, messageType, delay = 5000) {
  return (dispatch, getState) => {
    if (typeof messageText === 'string' && ['success', 'warning', 'danger', 'info'].indexOf(messageType) > -1) {
      const key = getState().alerts.lastKey + 1;
      dispatch(alertShow(messageText, messageType, key));
      setTimeout(() => dispatch(alertHide(key)), delay);
    } else {
      console.error('messageText must be string and messageType must be success, warning, danger, info');
    }
  };
}

export function hideAllAlert(delay = 5000) {
  return (dispatch, getState) => {
    getState().alerts.items.forEach((item) => {
      setTimeout(() => {
        dispatch(alertHide(item.key));
      }, delay);
    });
  };
}

尽管部分逻辑有点复杂，但都封装在 action 创建函数中了，多么清晰和模块化！接下来，我们编写 reducer 来根据这些 action，进行 state 的更新。

src/alert/redux.js

export default function (state = { lastKey: -1, items: [] }, action) {
  switch (action.type) {
    case ALERT_SHOW:
      return {
        ...state,
        items: [...state.items, action.payload],
        lastKey: state.lastKey + 1
      };
    case ALERT_HIDE:
      return {
        ...state,
        items: state.items.filter(item => (item.key !== action.payload.key))
      };
    default:
      return state;
  }
}

这里使用了解构赋值和重写的语法来保证 state 的不可变（Immutable）。

Redux 的 state 要求是不可变数据，这么做的原因是方便进行快速变更检查，进而有利于React组件判断是否需要重新渲染（re-render）。另外，不可变数据还有利于进行状态回退，错误追踪。不可变数据是函数式编程中一个常用的概念。关于不可变以及函数式编程在 React 与 Redux 中的应用，《React与Redux开发实例精解》 这本书中有非常详细的介绍，推荐阅读参考。

至此，Redux的编写就完成了。它的输出有四个：

• reducer函数，用于创建store。
• alertHide 函数用于隐藏指定信息。
• alertMessage 函数用于显示一条信息，并在几秒后隐藏。
• hideAllAlert 函数用于在渲染完页面后，过几秒隐藏服务器传来的信息。

接下来，我们来编写 React 组件。

设计编写 React 组件

React 组件的功能包括三个：

• 渲染要显示的信息，并根据类型渲染成不同颜色。
• 为每条信息渲染一个按钮，使用户可以通过点击按钮隐藏该信息。
• 在第一次渲染后，过几秒隐藏来自服务器的信息。

为此，我们做了以下几件事：

• 首先，使用 react-redux 的 connect 将 Redux 的 state 和 action 创建函数传给组件。
• 然后在组件中遍历渲染出所有信息（使用了 react-bootstrap 提供的 Alert 组件）。
• 最后，将 alertHide 函数绑在按钮的点击事件上，将 hideAllAlert 函数绑在组件渲染后的生命周期钩子上。

组件功能就实现了！

src/alert/AlertList.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Alert from 'react-bootstrap/lib/Alert';
import { hideAllAlert, alertHide } from './redux';

class AlertList extends Component {
  static propTypes = {
    alerts: PropTypes.array.isRequired,
    hideAllAlert: PropTypes.func.isRequired,
    alertHide: PropTypes.func.isRequired
  };

  componentDidMount() {
    this.props.hideAllAlert();
  }

  render() {
    const { alerts, alertHide } = this.props;
    return (
      <div>
        {alerts.map((item, i) => (
          <Alert
            key={i}
            bsStyle={item.messageType}
            onDismiss={() => alertHide(item.key)}
          >
            {item.messageText}
          </Alert>
        ))}
      </div>
    );
  }
}

export default connect(
  state => ({
    alerts: state.alerts.items
  }),
  { hideAllAlert, alertHide }
)(AlertList);

为了让 connect 可以获取到 Redux 的 state 和 dispatch 方法，我们还需要在组件顶部提供store。

src/index.js

// 三个参数分别为 reducer、initialState 和 enhancer
const store = createStore(
  combineReducers({ alerts: alertsReducer }),
  {},
  applyMiddleware(thunk)
);

// 在渲染之前发起action，用于模拟从服务器传来的信息
store.dispatch(alertMessage('message from server', 'info'));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

为了使用 bootstrap，还需要安装 bootstrap，并引用它的样式文件。

npm i bootstrap@3 --save

src/index.js

import 'bootstrap/dist/css/bootstrap.css';

至此，所有功能就都实现了！在后续的文章中，我们将介绍如何测试本例编写的 Redux 函数以及 React 组件。要知道，写测试是一个工程师走向成熟的必经之路，而且在 React 与 Redux 的应用中编写测试简直太方便了！

总结

• Redux 适合实现全局性的组件和功能，一些局部使用的功能使用 React 的局部状态即可。
• 推荐使用 create-react-app 来快速搭建React应用。
• Redux 的 action 创建函数与要实现的功能一一对应。
• Redux 的 state 为不可变数据。
• 使用 react-redux 的 connect 将 Redux 的 state 和 action 创建函数连接到组件，进而渲染界面，绑定事件。

教程源代码及目录

如果您觉得本博客教程帮到了您，就赏颗星吧！

https://github.com/lewis617/react-redux-tutorial