React 教程第十三篇 —— Redux 跨组件通信进阶之 Provider 和 connect

结构

• 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: '-'
    }
}

reducer.js

export default (state = 0, action) => {
    switch(action.type){
        case '+':
            return state + 1;
        case '-':
            return state - 1;
        default:
            return state;
    }
}

component.js

import 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)

组件 component2

action.js

export  function increment(){
    return {
        type: "+"
    }
}

export function decrement(){
    return {
        type: '-'
    }
}

reducer.js

export default (state = 0, action) => {
    switch(action.type){
        case '+':
            return state + 1;
        case '-':
            return state - 1;
        default:
            return state;
    }
}

component.js

import React, {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.js

import {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.js

import 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')
)

小结

• 组件使用了react-redux.connet将state和action全部合并到了props中去
• connet第一个参数为一个方法，该方法的第一个参数就是store，也就是通过redux.combineReducers来进行合并得到一个rootReducer
• 在最外层的根元素当中使用了react-redux.Provider组件，其属性store就是通过redux.createStore出来的store
• 当通过props调用actions时，redux隐性调用了store.dispath，而不用手动去调用。
• 在reducer中返回的值，也会传到mapStateToProps的参数当中去，而不用再手动调用store.getState()