版权声明:本文为博主原创文章,未经博主允许不得转载。 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。!!!