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