zoukankan      html  css  js  c++  java
  • redux和react-redux在react中的使用

     

    App.js:

    import React, { Component } from 'react';
    import PropTypes from 'prop-types'
    import { createStore } from 'redux'
    import { Provider } from 'react-redux'
    import Header from './Header'
    
    const themeReducer = (state, action) => {
      if (!state) return {
        themeColor: 'red'
      }
      switch (action.type) {
        case 'CHANGE_COLOR':
          return { ...state, themeColor: action.themeColor }
        default:
          return state
      }
    }
    
    const store = createStore(themeReducer)
    
    class App extends Component {
      render() {
        return (
          <Provider store={store}>
            <Header />
          </Provider>
        );
      }
    }
    
    export default App;
    

    Header.js:

    import React, { Component } from 'react';
    import PropTypes from 'prop-types'
    import { connect } from 'react-redux'
    import ThemeSwitch from './ThemeSwitch'
    
    class Header extends Component {
      static propTypes = {
        themeColor: PropTypes.string
      }
    
      render () {
        return (
          <div>
            <h1 style={{ color: this.props.themeColor }}>xutongbao</h1>
            <ThemeSwitch/>
          </div>
        )
      }
    }
    
    const mapStateToProps = (state) => {
      return {
        themeColor: state.themeColor
      }
    }
    Header = connect(mapStateToProps, null)(Header)
    
    export default Header
    

    ThemeSwitch.js:

    import React, { Component } from 'react';
    import PropTypes from 'prop-types'
    import { connect } from 'react-redux'
    
    class ThemeSwitch extends Component {
      static contextTypes = {
        store: PropTypes.object
      }
    
      handleSwitchColor (color) {
        if (this.props.onSwitchColor) {
          this.props.onSwitchColor(color)
        }
      }
    
      render () {
        return (
          <div>
            <button onClick={this.handleSwitchColor.bind(this, 'red')}>Red</button>
            <button onClick={this.handleSwitchColor.bind(this, 'blue')}>Blue</button>
          </div>
        )
      }
    }
    
    const mapDispatchToProps = (dispatch) => {
      return {
        onSwitchColor: (color) => {
          dispatch({ type: 'CHANGE_COLOR', themeColor: color })
        }
      }
    }
    ThemeSwitch = connect(null, mapDispatchToProps)(ThemeSwitch)
    
    export default ThemeSwitch
    
  • 相关阅读:
    几种连接数据库的OLEDB驱动程序
    Javascript如何访问和处理系统文件
    如何自学Java 经典
    Android Studio 修改 包名
    Android Studio -导入项目 gradle处理
    Android Studio- 把项目提交到SVN中操作方法
    android studio 运行太慢了
    Java多线程 -sleep 用法详解
    Java -native 方法
    Java多线程 -yield用法
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924770.html
Copyright © 2011-2022 走看看