• 一个带有路由的react项目中使用react-redux的方法


     
    一个带有路由的react项目中使用react-redux的方法:
     
    下载项目demo压缩包:https://files.cnblogs.com/files/shidawang/react-app.7z
     
    1根目录的index.js文件:
    import React from 'react' //引入react
    import ReactDOM from 'react-dom' //引入react-dom相关的对象
    import { Provider } from 'react-redux'
    import { HashRouter } from 'react-router-dom'
    import App from './App'
    import store from './store/index'
     
    //向目标元素渲染容器组件App
    //这里的组件Provider是一个react-redux中特殊的组件
    //注意:
    //1. Provider中有且只有一个子组件(这里就是App容器组件,不一定是容器组件,根据自己的业务需求自己操作)
    //2. 使用Provider组件的好处是,只需要给Provider组件设置属性,那么其子组件和其子组件中的子组件都可以直接使用其对应的属性
    //3. 避免了组件嵌套之后一个一个传递的复杂操作
    ReactDOM.render(
      <HashRouter>
        <Provider store={store}>
          <App />
        </Provider>
      </HashRouter>,
      document.getElementById('root')
    )
     
     
    2根目录的App.js文件
    import React, { Component } from 'react'
    import { Switch, Route, Redirect } from 'react-router-dom'
    import Index from './views/index/index.jsx'
    import './App.css'
    class example extends Component {
      render() {
        return (
          <Switch>
            <Route path="/index" component={Index}></Route>
            <Redirect to="/index"></Redirect>
          </Switch>
        )
      }
    }
    export default example
     
     
    3根目录下store文件夹中index.js文件
    import { createStore } from 'redux' //引入redux
     
    // 创建store对象,可以说store是redux的核心,因为根据redux的设计理念,
    //对state的操作都是根据store中的各种方法实现的,便于管理
    //在这里规定使用redux中的createStore和reducer纯函数结合来得到我们想要的store
    let store = createStore(reducer)
     
    // 定义reducer纯函数,reducer函数的作用就是,根据传过来的action和旧state的状态值
    //然后根据action的type的值进行不同的操作,进行新的state的返回,从而达到UI组件(展示组件)的重新渲染
    function reducer(state = { count: 0 }, action) {
      const count = state.count
      switch (action.type) {
        case 'increase':
          return { count: count + 1 }
        case 'clear':
          return { count: 0 }
        default:
          return state
      }
    }
    export default store
     
     
    根目录下store文件夹中dispatch.js文件
    import { connect } from 'react-redux'
    // mapDispatchToProps是connect的第二个参数
    //根据名称我们可以知道是把reducer纯函数中之前store中的dispatch方法和展示组件的props(属性)进行映射
    export function mapDispatchToProps(dispatch) {
      return {
        onIncreaseClick: () => dispatch({ type: 'increase' }),
        onClick1: () => dispatch({ type: 'clear' }),
      }
    }
    //mapStateToProps是connect的第一个参数
    //根据名称我们知道是把之前reducer纯函数中的state(状态)和展示组件的props(属性)进行映射
    export function mapStateToProps(state) {
      return {
        value: state.count,
      }
    }
    export default function connectMethod(dom) {
      return connect(mapStateToProps, mapDispatchToProps)(dom)
    }
     
     
     
    4根目录下views文件夹中业务组件使用react-redux
    根目录下views文件夹中Counter组件
    import React, { Component } from 'react' //引入react
    import connect from '../../store/dispatch'
    import './index.css'
    // 创建react组件(或者是虚拟节点)
    class demo extends Component {
      render() {
        const { value, onIncreaseClick } = this.props
        //通过解构赋值得到相应的属性里面的值
        //在这里Counter是UI组件(展示组件)其属性是其外面的容器组件中的state是通过react-redux中的connect操作之后传递过来的
        return (
          <div className="counter-1610608560715">
            <div className="wrap">
              <span className="sp1">{value}</span>
              <button onClick={onIncreaseClick}>增加</button>
              {/*通过点击事件触发绑定的属性,很明显,在这里onIncreaseClick是一个方法或者是一个对象的key值,其映射的value值是一个函数*/}
            </div>
          </div>
        )
      }
    }
    export default connect(demo)
     
     
    对应的index.css文件
     
    .counter-1610608560715  .wrap {
      height: 200px;
       500px;
      border: 1px solid red;
      text-align: center;
      line-height: 200px;
      border-radius: 10px;
    }
    .wrap .sp1{
      margin-right: 10px;
    }
     
     
    根目录下views文件夹中index组件
    import React, { Component } from 'react'
    import connect from '../../store/dispatch'
    import './index.css'
    import Counter from '../../views/Counter/Counter.jsx'
    class example extends Component {
      constructor() {
        super()
        this.state = {
          name: '这是首页',
        }
      }
      render() {
        let { value, onClick1 } = this.props
        return (
          <div className="index_1610611850499">
            <div>
              {this.state.name}
              {value}
            </div>
            <Counter></Counter>
            <button onClick={onClick1}>数据清零</button>
          </div>
        )
      }
    }
    export default connect(example)
     
     
    对应的index.css文件
    .index_1610611850499{
      background-color: #806d9e;
       50%;
      color: #fff;
    }
     
     
     
     
     
     
     
     
  • 相关阅读:
    GUI编程基础
    MyBatisPlus详解
    MYSQL数据库优化(一)
    设计模式遵循的原则
    MYSQL计算连续与不连续区间的方法
    CentOS安装MySQL5.7多实例步骤详解
    CentOS下安装Mysql 8.0步骤详解
    RDD和DataFrame和DataSet三者间的区别
    Spark读取Mysql,Redis,Hbase数据(一)
    Spark中Broadcast的理解
  • 原文地址:https://www.cnblogs.com/shidawang/p/14278146.html
Copyright © 2020-2023  润新知