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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/bbsyi/article/details/82499404

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