React、Redux 和 Bootstrap

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
相关阅读:
垃圾收集器与内存分配策略(二)之垃圾收集算法
 组合与继承
 垃圾收集器与内存分配策略(一)之对象存活判断
 虚拟机中对象的创建、内存布局、访问
 Java运行时数据区域划分
 Java操作excel表格
 位段
 sh -s用法
 ubutu14.04选中文本就会删除问题解决
 java容器-List
原文地址：https://www.cnblogs.com/Leo_wl/p/6079315.html

React、Redux 和 Bootstrap

使用 React、Redux 和 Bootstrap 实现 Alert

例子

为何使用 Redux ？

快速创建项目

设计编写 Redux

设计编写 React 组件

总结

教程源代码及目录