redux-thunk中间件和react-router-redux中间件如何在redux结合？

Question

这是我之前的代码

import thunkMiddleware from 'redux-thunk'
import reducers from './reducers'
import router from './router'
let store = createStore(reducers,applyMiddleware(thunkMiddleware));

下面是react-router-redux中间件

import createHistory from 'history/createBrowserHistory'

const history = createHistory()

const middleware = routerMiddleware(history)

const store = createStore(
  combineReducers({
    ...reducers,
    router: routerReducer
  }),
  applyMiddleware(middleware)
)

那么问题来了，applyMiddleware()函数怎么把thunkMiddleware和middleware结合啊，代码怎么写？

---

Index.js

import React from 'react'
import PropTypes from 'prop-types';
import {withStyles} from 'material-ui/styles'
import classNames from 'classnames'
import Grid  from 'material-ui/Grid';
import AppBar from 'material-ui/AppBar'
import Tabbar from '../components/Tabbar'
import Layout from '../components/Layout'

import {connect} from 'react-redux';

function TabContainer(props) {
    return <div style={{ padding: 20 }}>{props.children}</div>;
}

class Index extends React.Component{
    constructor(props){
        super(props);
        this.state={
            tabIndex:0,
        }
    }
    onTabChanged=(index)=>{
        this.setState({ tabIndex: index });
    };
    render(){
        const { classes,column } = this.props;
        const tabs = [{ id:1,name:'关注者动态' },{ id:2,name:'我的动态' },{ id:3,name:'全部动态' }];

        return(
            <Layout>
                <Grid container spacing={0} justify={'center'}>
                    <Grid item xs={12}>
                        <AppBar position="static" color="default" className={classNames(classes.appBar)}>
                            <Grid container spacing={0} justify={'center'}>
                                <Grid item xs={column}>
                                    <Tabbar
                                        tabs={tabs}
                                        onTabChanged={this.onTabChanged}
                                        index={this.state.tabIndex} />
                                </Grid>
                            </Grid>
                        </AppBar>
                    </Grid>
                    <Grid item xs={column}>
                        {this.state.tabIndex === 0 && <TabContainer>sdfsf                    </TabContainer>}
                        {this.state.tabIndex === 1 && <TabContainer>{'Item Two'}</TabContainer>}
                        {this.state.tabIndex === 2 && <TabContainer>{'Item Three'}</TabContainer>}
                    </Grid>
                </Grid>
            </Layout>
        )
    }
}

const mapStateToProps = state => {
    return {
        column:state.layout.column
    }
};

const styles = theme =>({
    appBar: {
        boxShadow:'none !important'
    },
});
export default connect(mapStateToProps)(withStyles(styles)(Index))

layout.js

import {
    SET_COLUMN,
    SET_BODY_WIDTH,
    TOGGLE_SIDEBAR,
    SET_SIDEBAR,
    SET_IS_MY_SITES
} from '../actions'

let layoutInfo={
    column:11,
    bodyWidth:0,
    isMySites:false,
    showSiteSidebar:false,
    sideBarInfo:{
        open: true,
        type:'persistent',//temporary,
    }
};

const layout = (state=layoutInfo,action)=>{
    switch (action.type){
        case SET_COLUMN:
            console.log('SET_COLUMN');
            return {
                ...state,
                column:action.column
            };
        case SET_BODY_WIDTH:
            console.log('SET_BODY_WIDTH');
            let isPersistent = !state.isMySites && action.width>1024;
            return{
                ...state,
                bodyWidth:action.width,
                column:state.sideBarInfo.open?11:10,
                showSiteSidebar:action.width>1024&&state.isMySites,
                sideBarInfo:{
                    open:isPersistent,
                    type:isPersistent?'persistent':'temporary'
                }
            };
        case TOGGLE_SIDEBAR:
            console.log('TOGGLE_SIDEBAR');
            let isOpen = !state.sideBarInfo.open;
            return{
                ...state,
                column:isOpen?11:10,
                sideBarInfo:{
                    ...state.sideBarInfo,
                    open:isOpen
                }
            };
        case SET_SIDEBAR:
            console.log('SET_SIDEBAR');
            return{
                ...state,
                sideBarInfo:action.sideBarInfo
            };
        case SET_IS_MY_SITES:
            console.log('SET_IS_MY_SITES');
            let showSideBar =state.bodyWidth>1024&&!action.isMySites;
            return {
                ...state,
                isMySites:action.isMySites,
                showSiteSidebar:state.bodyWidth>1024&&action.isMySites,
                sideBarInfo:{
                    open:showSideBar,
                    type:showSideBar?'persistent':'temporary'
                }
            };
        default:
            return state;
    }
};

export default layout;

Answer 1

很容易的，下面这种写法：

const middlewares = [thunk, middleware]
applyMiddleware(...middlewares)