【 React 】 在React项目中是如何使用Redux的?

1. 背景

在前面文章了解中,我们了解到redux是用于数据状态管理,而react是一个视图层面的库如果将两者连接在一起,可以使用官方推荐react-redux库,其具有高效且灵活的特性react-redux将组件分成:

  • 容器组件:存在逻辑处理
  • UI组件:只负责现显示和交互,内部不处理逻辑,状态由外部控制

通过redux将整个应用状态存储到store中,组件可以派发dispatch行为action给store其他组件通过订阅store中的状态state来更新自身的视图

2. 如何做

使用react-redux分成了两大核心:

  • Provider
  • connection

2.1 Provider

在redux中存在一个store用于存储state,如果将这个store存放在顶层元素中,其他组件都被包裹在顶层元素之上

那么所有的组件都能够受到redux的控制,都能够获取到redux中的数据

使用方式如下

javascript 复制代码
<Provider store = {store}> 
    <App /> 
<Provider>

2.2 connection

connect 方法将 store 上的 getState 和 dispatch 包装成组件的 props导入 conect 如下:

javascript 复制代码
import { connect } from "react-redux";

用法如下

javascript 复制代码
connect(mapStateToProps, mapDispatchToProps)(MyComponent)

可以传递两个参数:

  • mapStateToProps
  • mapDispatchToProps

2.3 mapStateToProps

把 redux中的数据映射到 react 中的 props 中去如下

javascript 复制代码
const mapStateToProps = (state) => {
    return {
        // prop : state.xxx |意思是将 state中的某个数据映射到props中
        foo: state.bar
    } 
}
const mapStateToProps = (state) => {
    return {
        // prop : state.xxx |意思是将 state中的某个数据映射到props中
        foo: state.bar
    } 
}

组件内部就能够通过 props 获取到 store 中的数据

javascript 复制代码
class Foo extends Component {
    constructor(props){
    super(props);
    }
    render(){
        return(
            // state.bar
            <div>this.props.foo</div>
        )
    }
}
Foo = connect()(Foo)
export default Foo

2.4 mapDispatchToProps

将redux中的dispatch映射到组件内部的props中

javascript 复制代码
const mapDispatchToProps = (dispatch) => { // 默认传递的参数就是dispatch
    return {
        onClick: () => {
            dispatch({
                type: 'increatment'
            }); 
        } 
    }; 
}
class Foo extends Component {
    constructor(props){
        super(props); 
    }
    render(){
        return(<button onClick = {this.props.onClick}> increase</button>) 
    } 
}
Foo = connect()(Foo);
export default Foo;
相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘4 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js