react-redux + redux + react 简单入门案例

项目地址： https://github.com/ddvdd008/react-redux/tree/master/react-redux-demo4

// package.js
  "devDependencies": {
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  }

index.js

在index.js或main.js的主文件的引入

import { createStore } from 'redux'
import { Provider } from 'react-redux'

import themeReducer from './components/reducer'  // 函数
const store = createStore(themeReducer);

ReactDOM.render(
    
        
    , 
document.getElementById('root'));
registerServiceWorker();

组件中的触发

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

class ThemeSwitch extends Component {
    static propTypes = {
        themeColor: PropTypes.string,
        onSwitchColor: PropTypes.func
    }
  
    constructor () {
      super()
      this.state = { themeColor: '' }
    }
  
    // dispatch action 去改变颜色
    handleSwitchColor (color) {
        if (this.props.onSwitchColor) {
            this.props.onSwitchColor(color)
        }
    }
    render () {
      return (
        

          Red
          Blue
        
      )
    }
}

const mapStateToProps = (state) => {
    return {
      themeColor: state.themeColor
    }
  }
const mapDispatchToProps = (dispatch) => {
    return {
        onSwitchColor: (color) => {
            dispatch({ type: 'CHANGE_COLOR', themeColor: color })
        }
    }
}

ThemeSwitch = connect(mapStateToProps, mapDispatchToProps)(ThemeSwitch)


export default ThemeSwitch

reducer.js 触发函数

const themeReducer = (state, action) => {
    if (!state) return {
      themeColor: 'red'
    }
    switch (action.type) {
      case 'CHANGE_COLOR':
        return { ...state, themeColor: action.themeColor }
      default:
        return state
    }
}
export default themeReducer

被触发的组件content

// ./components/content.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ThemeSwitch from './ThemeSwitch'
import { connect } from 'react-redux'

class Content extends Component {
    static propTypes = {
        themeColor: PropTypes.string
    }
    
    render () {
        return (
        

            
this is content
            
        
        )
    }
}

const mapStateToProps = (state) => {
    return {
      themeColor: state.themeColor
    }
}

Content = connect(mapStateToProps)(Content)

export default Content

被触发的组件Header.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

class Header extends Component {
    static propTypes = {
        themeColor: PropTypes.string
    }
    
    render () {
        return (
        
this is header
        )
    }
}
const mapStateToProps = (state) => {
    return {
      themeColor: state.themeColor
    }
}
Header = connect(mapStateToProps)(Header)

export default Header