react-redux的使用

关于react-redux

首先:react-redux和redux并不是一个东西,redux是一个独立的东西,react-redux是react官方根据市场偏好redux推出的react插件库。

了解react-redux的原理图:

安装:npm i react-redux

redux的ui组件和容器组件是分离的:

新建一个容器组件文件夹container:count:index.js文件(src\containers\Count\index.jsx)

javascript 复制代码
// 引入count的ui组件
import CountUI from '../../components/Count'

// 引入connect用于链接ui组件与redux
import {connect} from 'react-redux'
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from '../../redux/count_action'
// a函数返回的对象中的key就作为传递给ui组件的props的key,value就作为传递给ui组件的props的value--状态
function mapStateToProps(state){
    return {n:state}
}
function mapDispatchToProps(dispatch){
    return {jia:(data)=>{
        dispatch(createIncrementAction(data))
    },
    jian:(data)=>{
        dispatch(createDecrementAction(data))
    },
    jiaAsync:(data,time)=>{
        dispatch(createIncrementAsyncAction(data,time))
    }}
}
// 使用connect()()创建并暴露一个count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

关键是这里的connect连接了ui组件和store.js(状态管理)

ui组件中:完全不操作store和获取store,通过props可以直接访问从容器组件中的store和方法。

javascript 复制代码
import React, { Component } from 'react'
export default class index extends Component {

    // componentDidMount(){
    //     // 检测redux中的状态的变化,只要变化,就调用render
    //     store.subscribe(()=>{
    //         this.setState({})
    //     })
    // }
    // 加
    increment=()=>{
      const {value}=this.selectNumber
      this.props.jia(value*1)
    }
    // 减
    decrement=()=>{
        const {value}=this.selectNumber
        this.props.jian(value*1)
    }
    // 奇数加
    incrementIfOdd=()=>{
        const {value}=this.selectNumber
        if(this.props.count%2!==0){
            this.props.jia(value*1)
        }
    }
    // 异步加
    incrementAsync=()=>{
        const {value}=this.selectNumber
        this.props.jiaAsync(value*1,500)
    }

  render() {
    return (
      <div>
        <h1>当前求和为:{this.props.n}</h1>
        <select ref={c=>this.selectNumber=c}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

代码优化1:容器组件(简写箭头函数的方式)

javascript 复制代码
// 引入connect用于链接ui组件与redux
import {connect} from 'react-redux'
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from '../../redux/count_action'
// a函数返回的对象中的key就作为传递给ui组件的props的key,value就作为传递给ui组件的props的value--状态
const mapStateToProps= state => ({n:state})
const mapDispatchToProps= dispatch => ({
jia:data=> dispatch(createIncrementAction(data)),
jian:data=>dispatch(createDecrementAction(data)),
jiaAsync:(data,time)=>dispatch(createIncrementAsyncAction(data,time))
})
// 使用connect()()创建并暴露一个count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

代码优化2:可以直接简写返回一个对象映射(项目中可能这种写法更多见)

javascript 复制代码
// 引入count的ui组件
import CountUI from '../../components/Count'

// 引入connect用于链接ui组件与redux
import {connect} from 'react-redux'
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from '../../redux/count_action'
// a函数返回的对象中的key就作为传递给ui组件的props的key,value就作为传递给ui组件的props的value--状态
// const mapStateToProps= state => ({n:state})
// const mapDispatchToProps= dispatch => ({
// jia:data=> dispatch(createIncrementAction(data)),
// jian:data=>dispatch(createDecrementAction(data)),
// jiaAsync:(data,time)=>dispatch(createIncrementAsyncAction(data,time))
// })
// 使用connect()()创建并暴露一个count的容器组件
export default connect(
    state => ({n:state}),
    {
        jia:createIncrementAction,
        jian:createDecrementAction,
        jiaAsync:createIncrementAsyncAction,
    }
)(CountUI)

使用react-redux之后:

入口文件中写provider全局提供store.不用再每使用一个组件,传一次store.

不用自己写监听store变化了,connect已经实现了。

如果有很多reducer文件:store.js文件

相关推荐
1024小神1 分钟前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript
拾光拾趣录3 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权4 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598244 分钟前
vue3源码解析:调度器
前端·vue.js
一一一87114 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚27 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件30 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite