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
    
  • 相关阅读:
    IntelliJ Idea 快速配置
    常用资源工具集合
    IntelliJ Idea 快捷键大全
    spring boot注解梳理
    boot中的Scheduling定时器使用笔记
    OKHttp使用笔记
    EasyExcel使用笔记
    自定义注解用AOP实现接口信息打印
    Java的具体集合
    linux修改系统时间
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924770.html
Copyright © 2011-2022 走看看