react使用总结五：react-redux合并多个Reducer

1.Reducer1（themeColor.js）

// reducer 优化后================
// 建议使用这中结构

// 1.定义默认数据
let initialState = {
    themeColor: red
}

// 2.Reducer
const themeReducer = (state = initialState, action) => {
    switch (action.type) {
      case CHANGE_COLOR:
        return { ...state, themeColor: action.themeColor }
      default:
        return state
    }
}
// 3.导出
export default themeReducer;

2.Reducer2（aa.js）

// reducer 优化后================
// 建议使用这中结构

// 1.定义默认数据
let initialState = {
    aa:99999
}

// 2.Reducer
const aaReducer = (state = initialState, action) => {
    switch (action.type) {
      case CHANGE_AA:
        return { ...state, aa: action.aa }
      default:
        return state
    }
}
// 3.导出
export default aaReducer;

3.index.js（合并Reducer）

import {combineReducers} from redux;

import themeColorReduce from ./themeColor.js;
import aaReducer from ./aa.js;

const appReducer = combineReducers({
    themeColorReduce,
    aaReducer,
});
export default appReducer;

4.router.js 使用合并后的那个Reducer

import React from "react";
import {BrowserRouter as Router,Route,Redirect,Switch} from react-router-dom;


// 1.引入组件
import App from ./pages/App/app.js;
import Index from ./pages/Index/index.js;
import Page1 from ./pages/Page1/page1.js;
import Page2 from ./pages/Page2/page2.js;
import Page3 from ./pages/Page3/page3.js;


// react-redux
// import createStore from ./store/store.js;
// import {Provider} from ./react-redux.js;
import { createStore } from redux
import { Provider } from react-redux
import appReducer from ./store/index.js;
// 使用合并后的那个Reducer
const store = createStore(appReducer);


// 2.构建路由
const Routes = (
	<Router>
		{/*react-redux*/}
		<Provider store={store}>
			<App>
				<Switch>
					<Route path="/index" component={Index}></Route>
					<Route path = "/page1" component = {Page1}></Route>
	 				<Route path = "/page2" component = {Page2}></Route>
	 				<Route path = "/page3" component = {Page3}></Route>
					<Redirect from="/" to="/index"/> {/*重定向*/}
				</Switch>
			</App>
		</Provider>
	</Router>
)

export default Routes;

5.page1.js 使用

import React, { Component } from react;
import {Router,Route,browserHistory} from react-router-dom;
import { Button } from antd-mobile;
// 1.引入PropTypes
import PropTypes from prop-types;

// 2.引入react-redux
import { connect } from react-redux;


import {IntervalEnhance} from ../../IntervalEnhance;


class Page1 extends Component {
	// 3.定义静态propTypes
	static propTypes = {
	    store: PropTypes.object
	}

	componentWillMount(){
		 // this.alertFn();
		// this.state.alertFn()
		// 
		console.log(this.props)
	}


	render() {
	    return (
	      <div className="page1">
	        这是page1
	        <br/>
	        themeColor:{ this.props.themeColor }
	        <br/>
	        <Button type="primary">{this.props.a}</Button>
	        <br/>
	        {/*<input onBlur={this.props.alertFn}/>	*/}
	      </div>
	    );
  	}

}

// 4.定义mapStateToProps
const mapStateToProps = (state) => {
	  return {
	    themeColor: state.mapStateToProps.themeColor
	  }
}
// 5.connect
Page1 = connect(mapStateToProps)(Page1)


export default Page1;
// export default IntervalEnhance(Page1);

注意：使用这里mapStateToProps中是state.themeColorReduce.themeColor而不是state.themeColor。！！！