React 教程第十三篇 —— Redux 跨组件通信进阶之 Provider 和 c
发布时间:2020-12-15 06:26:34 所属栏目:百科 来源:网络整理
导读:结构 component1 actions.js reducer.js component1.js component2 actions.js reducer.js component.js redux tore.js app.js 组件 Component1 action.js export function increment(){ return { type: "+" }}export function decrement(){ return { type:
结构
组件 Component1action.jsexport function increment(){ return { type: "+" } } export function decrement(){ return { type: '-' } } reducer.jsexport default (state = 0,action) => { switch(action.type){ case '+': return state + 1; case '-': return state - 1; default: return state; } } component.jsimport React,{Component} from 'react' import {connect} from 'react-redux' import * as Actions from './actions' import Component2 from '../cp2/cp2' class Component1 extends Component{ increment = () => { console.log(this.props) this.props.increment(); } render(){ return ( <div> <h3>component-cp1-{this.props.cp1}</h3> <input type="button" value="increment" onClick={this.increment}/> <Component2 /> </div> ) } } const mapStateToProps = (store) => { return { cp1: store.cp1 } } export default connect(mapStateToProps,Actions)(Component1) 组件 component2action.jsexport function increment(){ return { type: "+" } } export function decrement(){ return { type: '-' } } reducer.jsexport default (state = 0,{Component} from 'react' import {connect} from 'react-redux' import * as Actions from './actions' class Component2 extends Component{ render(){ return ( <div> <h3>component-cp2-{this.props.cp2}</h3> </div> ) } } const mapStateToProps = (store) => { return { cp1: store.cp1,cp2: store.cp2 } } export default connect(mapStateToProps,Actions)(Component2) store.jsimport {createStore} from 'redux'; import { combineReducers } from 'redux'; import cp1 from '../components/cp1/reducer' import cp2 from '../components/cp2/reducer' const rootReducer = combineReducers({ cp1,cp2 }); const store = createStore(rootReducer) export default store; app.jsimport React from 'react' import ReactDOM from 'react-dom' import {Router,hashHistory} from 'react-router' import {Provider} from 'react-redux' import store from './redux/configStore' import Component1 from './components/cp1/cp1' ReactDOM.render( <Provider store={store}> <Component1/> </Provider>,document.getElementById('app') ) 小结
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |