首页 > 其他分享 >React — 访问 Redux Store 的正确方法是什么?

React — 访问 Redux Store 的正确方法是什么?

时间:2024-05-10 09:45:08浏览次数:28  
标签:const React connect 组件 ownProps Redux Store

在组件中访问 Store 的最佳方法是使用connect()函数,该函数创建一个包裹现有组件的新组件。此模式称为高阶组件,通常是在 React 中扩展组件功能的首选方式。这允许您将状态和 Action 创建者映射到组件,并在 Store 更新时自动传递它们。

  • 使用 connect 的<FilterLink>组件:
import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => ({
  active: ownProps.filter === state.visibilityFilter
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
})

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink
  • 由于它具有相当多的性能优化并且通常不太可能导致错误,因此 Redux 开发人员几乎总是建议使用connect()直接访问 Store(使用上下文API)。
class MyComponent {
  someMethod() {
    doSomethingWith(this.context.store)
  }
}

 

标签:const,React,connect,组件,ownProps,Redux,Store
From: https://www.cnblogs.com/qinlinkun/p/18183586

相关文章

  • react + antd + js 简单Cron组件,支持国际化
    Cron.jsimportReact,{Fragment,useState,useCallback,useRef,useEffect}from'react';import{Select,TimePicker,Input}from'antd';constOption=Select.Option;constmwidth80={minWidth:80,marginRight:10};constwidt......
  • React文本溢出组件封装以及高亮提示
    React文本溢出组件封装以及高亮提示Abbr组件:使用场景:当我们需要设置支持最大行数时进行省略展示当我们需要设置支持设置超过多少字符进行省略展示当我们需要设置支持关键字高亮展示(有点问题,当关键字被裁剪成...之后,就无法高亮)当我们需要支持忽略大小写高亮当我们需要支持......
  • redux中核心组件有哪些,reducer的作用
    在redux中,核心组件包括Action、Reducer、Store和Middleware。Action是一个普通的JavaScript对象,用于描述发生了什么事件。它必须包含一个type属性,用于标识事件的类型。可以在Action中添加其他自定义的属性来传递数据。Reducer是一个纯函数,用于根据收到的Action来更新应用的状态(S......
  • react 性能优化
    一纯组件1使用shouldComponentUpdate对先前的状态和props数据与下一个props或状态相同,如果两次的结果一直,那么就returnfalse使用纯净组件,pureComponentPureComponents负责shouldComponentUpdate——它对状态和props数据进行浅层比较(shallowcomparison),如果先前......
  • react里面bind与箭头函数
    bind由于在类中,采用的是严格模式,所以事件回调的时候,会丢失this指向,指向undefined,需要使用bind来给函数绑定上当前实例的this指向;箭头函数的this指向上下文,所以永久能拿到当前组件实例,this指向,我们可以完美的使用箭头函数来替代传统事件处理函数的回调箭头函数class......
  • react理论总结1
     1)对react的理解(特点)1,Jsxjs+xml,是对js语法的扩张,需要通过babel.js的编译转化成浏览器可以解析的普通js对象2,虚拟dom。相当于在js和真实dom之间的缓存,state改变调用render函数会重新生成新的虚拟dom树,通过diff算法计算出新旧dom差异 只能差异部分更新到真实的dom,减少......
  • react ts 项目如何配置路径别名?
    tsconfig.json{"compilerOptions":{"baseUrl":".",//路径配置"paths":{"@/*":["src/*"]},"target":"ES2020","lib":[......
  • React Hooks 入门教程【阮一峰】
    组件类的缺点React的核心是组件。早前版本,组件的标准写法是类。//一个简单的组件类importReact,{Component}from"react";exportdefaultclassButtonextendsComponent{constructor(){super();this.state={buttonText:"Clickme,please"};......
  • TS — 在React中使用TS(基础使用)
    在React中使用TypeScript(TS)是一种很常见的做法,因为TypeScript提供了静态类型检查和其他一些有用的功能,可以帮助您更好地开发和维护React应用。1.原始组件://SimpleComponent.jsimportReactfrom'react';constSimpleComponent=({name})=>{return<div>Hel......
  • react中的state值修改了,也触发了页面的重新渲染,但是视图没有更新,可能是什么原因?
    state更新的是一个值List,但是页面渲染使用的是List中的某一项(当前选中项curItem),也定义成了state,而更新状态时,只更新了List,忽视了当前选中项curItem的状态更新,导致视图没有更新,即使组件重新渲染了,但是视图中使用的是curItem解决方案:state中不要保存当前选中项curItem,而应该保......