使用Ramda更新mapStateToProps
是指在React Redux中使用Ramda库来更新mapStateToProps函数。Ramda是一个函数式编程库，提供了许多方便的函数来处理数据和函数组合。
在React Redux中，mapStateToProps是一个函数，用于将Redux store中的状态映射到组件的props上。通常情况下，我们使用纯JavaScript来编写mapStateToProps函数，但是使用Ramda可以使代码更简洁和易读。
下面是一个使用Ramda更新mapStateToProps的示例：
import { connect } from 'react-redux';
import { compose, mapProps } from 'recompose';
import { path, prop } from 'ramda';
const mapStateToProps = compose(
mapProps({
data: path(['myReducer', 'data']),
isLoading: path(['myReducer', 'isLoading']),
error: path(['myReducer', 'error']),
userId: prop('userId'),
})
);
export default connect(mapStateToProps)(MyComponent);在上面的示例中，我们使用Ramda的path函数来获取Redux store中的特定状态值，并将其映射到组件的props上。我们还使用Ramda的prop函数来获取组件的props中的userId值。
这样，我们可以更简洁地定义mapStateToProps函数，并且可以利用Ramda的函数组合和其他功能来处理更复杂的状态映射逻辑。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
1回答
Redux存储，“属性XX不存在”
reactjs、redux、react-redux
我试图设置我的第一个项目与Redux，但挣扎最后的细节。当我尝试使用stateProps时，当我试图访问this.props.isLoading (这是Store中的一个属性)时，会得到错误Property XX does not exist on type (...)。我使用和路由器。
编辑：-- mapDispatchToProps__也有同样的问题，但我只在这里展示了状态道具。(希望各州的解决方案也能解决调度问题)
以下是相关代码：
myReducer.ts in /reducers
export default function reducer(
state = {
isLoa
浏览 0提问于2019-04-23得票数 0
回答已采纳
4回答
利用腾讯云GPU构建深度学习网络？
对象存储、深度学习
如题，本人（学生）想用腾讯云构建一个实验性的深度学习网络，具体要用到腾讯云的哪些服务呢？（GPU，COS），另外还需考虑较低的成本。。。
浏览 1132提问于2017-12-13
1回答
在Vue/Vuex中是否有类似mapStateToProps方式的react/redux
reactjs、vuejs2、vuex
通常在React/Redux中映射状态和操作的方法如下所示，因此映射函数与组件代码分开放置：
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import myAction from 'actions/request';
class MyComponent extends Component {
/* BODY */
}
浏览 9提问于2018-07-31得票数 3
回答已采纳
1回答
使用react路由器-dom和redux时从组件访问道具
reactjs、react-router、react-redux
我制作了这个示例应用程序来学习如何在一起使用react路由器-dom和redux，除了，我不知道如何在组件中访问道具？
所有代码都在这里，
入口文件index.js
import { render } from 'react-dom'
import React from 'react'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import App from './app'
浏览 4提问于2017-08-31得票数 1
回答已采纳
1回答
每次商店更新时，我如何进行ajax调用？
reactjs、redux、redux-thunk
每次商店更新时，我如何进行ajax调用？
基本上，我想用新的API参数来获取产品，假设每页有一个下拉列表。它在负载下工作良好，即按componentWillMount方法调用。
，但我不知道当商店发生变化时，如何再进行一次取货。
import React, { Component } from 'react';
import ProductsList from '../components/ProductsList'
import { connect } from 'react-redux'
// Action Creators
import
浏览 2提问于2017-08-16得票数 0
1回答
React/Redux -将排序或筛选功能添加到一个组件
reactjs、redux、react-redux
我构建了一个react-redux应用程序，可以从Rails API获取评论列表-我真的想添加按字母升序/降序对评论列表进行排序的功能，但我不确定从哪里开始。
为了做到这一点，我是否需要添加我希望如何将此列表排序到状态，然后添加一个新操作？或者，有没有一种更简单的方法，只需将其添加到显示评论列表的组件中？
如果可能的话，我想要确切的代码示例，因为我真的不知道如何开始这项工作，以及我可以在哪里完成这项工作。
./components/reviews/ReviewsList.js
import React from 'react'
import { connect } from &
浏览 10提问于2021-02-22得票数 0
回答已采纳
2回答
在回调中调度redux操作
javascript、react-native、redux
我已经开始在react-native中使用redux，我遇到了问题，当我在图像组件的onLoadStart函数中执行dispatching操作时，回调正在触发，我看到操作被调用，并且在屏幕上看到Loading...，但是当我在onLoadEnd function中使用dispatching时，什么都没有发生(callback loadEnd is not fired, app looks like frozen)。当我在这两个地方使用console.log时，代码都工作得很好。谁能告诉我我做错了什么？
class DisplayImage extends Component {
l
浏览 16提问于2017-06-28得票数 0
1回答
Redux w/ HOC - TypeError:无法设置未定义的属性“props”
javascript、reactjs、redux、react-redux、higher-order-components
我正在Next.js中构建一个快速身份验证高级组件，下面的代码出现了一些问题：
import SignIn from "../components/sign-in";
import { connect } from "react-redux";
import { useRouter } from "next/router";
const AuthenticationCheck = WrappedComponent => {
const { isAuthenticated, ...rest } = props;
const rout
浏览 2提问于2019-11-27得票数 2
回答已采纳
4回答
数据比较多，有什么好点的存储方案吗？
对象存储、文件存储
贵州地区，给公司做类似企业网盘的东西，存储数据大概在6~7T左右，有没有好点的存储方案呢？我看腾讯云这边有COS、CFS等，我是从网站直接读取数据，推荐那个？有没有什么试用渠道呢？
浏览 967提问于2017-09-15
4回答
我如何将这个function组件重写为一个纯函数，并使用function路由器获得一个没有错误/警告的实现？
reactjs、react-router
我一直在努力根据我的eslint错误建议重写这个function组件。我的目标也是让它在没有抛出警告/错误的情况下与react路由器一起工作。
下面是类组件：
class PrivateRouteContainer extends React.Component {
render() {
const {
isAuthenticated,
component: Component,
...props
} = this.props
return (
<Route
{...props}
浏览 1提问于2018-02-23得票数 0
1回答
页，用于编辑支出列表中的项目。
react.js、typescript
我一直在做一个初学者项目，学习反应和类型记录。该项目是一个费用管理应用程序，我已经尝试将我的大部分应用程序拆分成简单的短组件。对于EditExpensePage组件，我已经将其连接到应用程序的Redux存储区，以便能够访问状态和分派操作。
我想得到一些关于我编写的代码的反馈，以及改进它的方法。
费用接口：
export interface Expense {
id: string;
description: string;
note?: string;
amount: number;
createdAt: number;
}
EditExpensePag
浏览 0提问于2020-05-16得票数 1
回答已采纳
1回答
如何从redux-query响应中获取报头？
reactjs、react-redux
我发送了一个查询请求，并从服务器获得了一个响应。响应头包含一些我想要读取的信息。我可以看到错误选择器中有responseHeaders，但是我不知道如何获取成功案例的头文件。 取自https://amplitude.github.io/redux-query/docs/connect-request的示例 import { connect } from 'react-redux';
import { querySelectors } from 'redux-query';
import { connectRequest } from 'redux-qu
浏览 17提问于2019-08-17得票数 1
4回答
状态未使用react redux thunk更新
javascript、reactjs、redux、react-redux、redux-thunk
我对使用redux和react还是个新手。我试着用redux做一个简单的API调用，并让它在react中渲染。我可以看到API调用在redux dev工具的有效负载中工作，但我似乎无法让它更新可能在` `connect?中的状态。
actions/index
import FilmAPI from '../api/api';
export const FETCH_FILMS = 'FETCH_FILMS';
export const RECEIVE_FILMS = 'RECEIVE_FILMS';
export const receiveFi
浏览 0提问于2018-02-20得票数 1
4回答
如何修复"used reverse() to map through data form call (State in redux state) [Javascript Redux/React]“
javascript、reactjs、redux、reverse
this.props.playedGames从我的Redux状态中提取，并从最近日期排序到第一个条目(降序)。我需要我的累积折线图(chart.js)的数据顺序与最近日期的第一个条目的顺序相反。我如何在不使用每次刷新时不断反转的反转方法的情况下做到这一点。我不想重新调用API，因为我有我需要的数据。 我已经尝试为页面刷新时创建一个状态，这样它就不会刷新。我已经尝试了几种不同的方法。所有操作都失败了。 我的代码： import { connect } from 'react-redux';
import {withRouter} from 'react-router&#
浏览 36提问于2019-02-07得票数 0
1回答
反应/残差测试
javascript、unit-testing、reactjs、redux、enzyme
我正在学习如何用酶来测试React/Redux成分。该组件以应用程序级别的状态作为支持。当我运行测试时，我会得到以下错误：
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
TypeError: Cannot read property 'contextTypes' of undefined
浏览 3提问于2016-12-18得票数 1
回答已采纳
2回答
如何从recompose转换为hooks？
javascript、reactjs、react-native、react-hooks、recompose
我的公司使用recompose作为我们的状态管理工具。我们正在重构我们的应用程序以使用钩子。对于下面的代码，您将如何用react钩子组件替换recompose组件？
我知道withState变成了useState，比如：
withState('something', 'setSomething', null)
变成了
const [something, setSomething] = useState(null);
withProps、withHandlers、compose、hoistStatics和lifecycle将更改为什么？
mapStateToPro
浏览 33提问于2019-04-02得票数 6
1回答
在react-redux中处理编辑操作
reactjs、redux、react-redux、redux-thunk
我正在尝试在我的react-redux项目中编辑一篇文章，我这样做 我的post.js <div className="Heading_with_icon_story">
<span className="post_heading">{item.storyTitle}</span>
<p className="both_icons">
<img src={edit} alt="miss-mist
浏览 10提问于2020-04-06得票数 0
1回答
当使用连接函数向Hoc提供状态时，响应给出错误
javascript、reactjs、redux、react-redux
大家好，我想使用withAuth HOC来决定HomePage是作为仪表板还是以来宾homePage的形式呈现。此外，我希望将此逻辑与其他组件一起使用。但是每当我试图用map状态连接我的临时状态以支持它返回时，我就会陷入错误。
TypeError: Object(…)不是一个函数
img :-
。我看到了其他类似的stackOverflow解决方案--，但它们都无法清除我的错误。
我也尝试过使用compose，但是即使没有起作用，out.If，我也删除了连接，它的工作方式类似于charm.But，在我的特殊情况下，我需要redux状态。另外，我还想使用的钩子，但我现在只想保持简单
浏览 2提问于2020-04-11得票数 1
回答已采纳
2回答
如何用useSelector显示对象数组？
javascript、node.js、reactjs、redux、mern
我应该用什么代替useSelector或mapStateToProps？它们多次运行(array.lenght)并将所有值更改为最后一个值。
我有一个电子商务应用程序，ProductDetails组件包含产品评论，我将其映射到ProductReview组件以获取从用户Id获取的用户信息。
ProductDetails.js
import React, { useEffect } from "react";
import ProductReview from "../components/ProductReview";
import { useSelector,
浏览 8提问于2021-07-22得票数 0
回答已采纳
3回答
react组件如何在没有mapStateToProps的情况下获取数据
reactjs、redux
我是一个Redux新手，当我看到下面的代码时，我被空的mapStateToProps函数搞糊涂了，如下所示：
const mapStateToProps = state => {
return {};
}
据我所知，上面的函数没有做任何事情，所以Redux不会向组件提供任何数据。但在现实中，组件确实获得了数据。我完全糊涂了，请完整的代码如下：
const mapStateToProps = state => {
return {};
};
const mapDispatchToProps = dispatch => {
return {
updateCon
浏览 0提问于2020-07-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
