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 = (
	
		{/*react-redux*/}
		
			
				
					
					
	 				
	 				
					 {/*重定向*/}
				
			
		
	
)

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 (
	      

	        这是page1
	        

	        themeColor:{ this.props.themeColor }
	        

	        {this.props.a}
	        

	        {/*	*/}
	      
	    );
  	}

}

// 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。！！！