使用Store对数据进行集中的单一流向的管理(React项目实战教程七)

啥叫Redux？官方说：Redux是javascript的状态管理容器。个人理解就是它是做js数据管理的，它可以让数据沿着一个方向进入中心，然后经过中心处理后又沿着另一个方向返回。示意图大致如下：

graph LR
A(page component) -- dispatch --> B(action)
B --> C{Reducer}
C --> D((Store))
D -- state --> A

根据图示可以看到，Redux三个重要的内容：

• action
• reducer
• store

在开始之前有必要去官方文档看哈子–>Redux中文版、官方英文版。

安装

react项目里面使用redux需要用到react-redux，它的作用是将component与store相关联，使得我们能够通过dispatch达到修改state的目的。
先来安装redux相关的依赖包：

$ yarn add redux react-redux

安装好了之后，我们就要规划action、reducer和store的管理。所以，我在项目目录src/下面建了个redux目录，然后分别建了actions、reducers和store目录。

创建Action

在actions目录下面我们建一个home.js：

export const HOME_INDEX = 'HOME_INDEX';

export const getHomeIndexData = params => {
  return {
    type: HOME_INDEX,
    data: { ...params }
  };
};

创建Reducer

在reducers目录下面新建home.js，然后引入home的action：

import { HOME_INDEX } from '../actions/home';
let initState = {};

const HomeReducer = (state = initState, action) => {
  switch (action.type) {
  case HOME_INDEX:
    return { ...state, ...action.data };
  default:
    return state;
  }
};

export default HomeReducer;

创建Store

在store目录下面新建index.js，然后将home的reducer引入到store：

import { createStore } from 'redux';
import HomeReducer from '../reducers/home';

const Store = createStore(HomeReducer);

export default Store;

也可以看到，这里引入了redux的createStore方法将所有的reducer都丢给了redux处理。

修改APP

打开app.js，然后把store传入进来：

import * as React from 'react';
import { Provider } from 'react-redux';
import Routes from './routes';
import Store from './redux/store';

class App extends React.Component {
  render() {
    return (
      <Provider store={Store}>
        {Routes}
      </Provider>
    );
  }
}

export default App;

到目前为止，我们已经将reducer扔给了redux，也将store回传给了app。那么我们的组件要怎么接收store，和向reducer广播内容呢？下面就需要修改页面组件了。

修改Home page

打开views/home/index.js，然后引入connect，并设置state的提取及接收dispatch的方法：

import * as React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getHomeIndexData } from '../../redux/actions/home';
import './index.less';

class Home extends React.Component {
  componentDidMount() {
    this.props.getInit({
      info: '首页内容',
      title: '首页'
    });
  }
  render() {
    return (
      <div className="home">
        <div className="home-text">{this.props.info}</div>
      </div>
    );
  }
}

Home.propTypes = {
  info: PropTypes.string.isRequired,
  getInit: PropTypes.func.isRequired,
};

const mapStateToProps = ({ home }) => {
  return { ...home };
};

const mapDispatchToProps = dispatch => ({
  getInit: params => {
    dispatch(getHomeIndexData(params));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);

这里需要理解一下：state和dispatch是同时都会在组件的props里面的。

运行

到此，我们的redux就已经在项目里面接好了，使用yarn start启动下看看Home是不是已经成功接收到了经过redux处理过的state。

Redux-DevTools工具可以让你更直观的查看state经过redux的变化。

Redux并非必需使用，这个得看你项目的数据复杂程度。假如只是个小项目，请求少，数据处理量不多的情况下，不使用Redux还能降低项目文件的体积。