2、Redux 的绑定

在一个大型的项目中，类似 Redux 的数据流框架是很有必要的，下面我们来演示下怎么样在这个简单的 Demo 中引入 Redux 来管理它的数据。首先安装 Redux 相关的依赖:

npm i redux react-redux redux-thunk redux-logger -S

创建 store 对象，在 src/page 目录下创建 store.js 文件，这里添加了让 action 能支持异步的 redux-thunk 和方便在开发时候调试的 redux-logger 包。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../reducers';
const middleware = [thunk];
if (process.env.NODE_ENV !== 'production') {
    middleware.push(createLogger()); // 非线上环境加载
}
const store = createStore(
    rootReducer,
    applyMiddleware(...middleware)
);
export default store;

然后修改下入口文件 index.js，将该 store 绑定到根组件上。

import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
    <Provider store={store}>
        <Root />
    </Provider>,
    document.getElementById('root')
);

接下来，我们在 src 目录下创建一个 reducers 目录并在该目录下新建 index.js 文件作为根 Reducer，再把 Demo 中 List 数据相关的代码复制过来，此时的代码如下：

let guid = -1;
function getArrayByLength(length) {
    var ret = [];
    for (var i = 0; i < length; i++) {
        ret[i] = null;
    }
    return ret;
}
function getRandomList(size) {
    return getArrayByLength(size).fill(1).map(num => parseInt(Math.random() * 100));
}
function getRandomDataSource(size) {
    return getRandomList(size).map(num => ({ text: num, key: ++guid }));
}
export default (state = {
    list: getRandomDataSource(25)
}, action) => {
    const { type, payload } = action;
    switch (type) {
        default: {
            return state;
        }
    }
};

现在让我们回到列表页，引入 react-redux 的 connect 方法并将 Redux 的数据绑定到组件的 props 中去。

import { connect } from 'react-redux';
...
const mapStateToProps = state => ({
    list: state.list
});
export default connect(
    mapStateToProps,
    null
)(Detail);

将 List 的 dataSource 属性值置为 props 中绑定的 Redux 数据项，此时 List 的初始数据项就是通过 Reducer 中得到的数据了。

render() {
    const { list } = this.props;
    return {
        <List
            dataSource={list}
        >
            ...
        </List>
    }
}