- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有时,在 Redux 应用程序中为每个实例创建一个存储会很有用。 Redux 的创建者本身创建了一个 Gist 来描述如何实现这一点:https://gist.github.com/gaearon/eeee2f619620ab7b55673a4ee2bf8400
我已经在 Gist 中问过这个问题,但我认为 StackOverflow 是解决这个问题的更好地方:
我想知道如何dispatch
对组件自己的特殊存储的操作?有没有办法访问store
<Provider />
的 -prop对于每个 <SubApp />
(及其子组件)?
例如:我有一些 API 类调用 dispatch
从远程服务器获取数据后。但由于我无法导入“普通”存储,那么处理自定义存储以使它们可用于其他类/文件/服务的最佳方法是什么?
所以我让它工作了,但我认为这是一种非常肮脏的方式(注意代码中的 UGLY?
注释):
提供商:
通过在构造函数内创建存储来为每个实例创建一个存储:
export default class OffersGridProvider extends React.Component {
constructor(props) {
super(props)
this.store = createStore(reducers);
}
render() {
return (
<Provider store={this.store}>
<OffersGridContainer offers={this.props.offers} />
</Provider>
);
}
}
容器:
提供商注入(inject) dispatch
此存储到我的方法 OffersGridContainer
我可以用它来将操作分派(dispatch)到该实例的存储:
class OffersGridContainer extends React.Component {
componentDidMount() {
// UGLY???
const { dispatch } = this.props;
let destinationIds = [];
this.props.offers.forEach((offer) => {
offer.to.forEach((destination) => {
destinationIds.push(destination.destination);
});
});
// MORE UGLY???
destinationsApi.getDestinations(dispatch, destinationIds);
}
render() {
return (
<OffersGridLayout destinations={this.props.destinations} />
);
}
}
const mapStateToProps = function(store) {
return {
destinations: store.offersGridState.destinations
};
}
export default connect(mapStateToProps)(OffersGridContainer);
API方法:
只需使用 dispatch
-我作为参数传递给 API 方法的方法:
export function getDestinations(dispatch, ids) {
const url = $('meta[name="site-url"]').attr('content');
const filter = ids.map((id) => {
return `filter[post__in][]=${id}`;
}).join('&');
return axios.get(`${url}/wp-json/wp/v2/destinations?filter[posts_per_page]=-1&${filter}`)
.then(response => {
dispatch(getOffersGridSuccess(response.data));
return response;
});
}
刚刚收到有关 mapDispatchToProps
的提示在评论中,所以我的Container
现在看起来像这样:
class OffersGridContainer extends React.Component {
componentDidMount() {
let destinationIds = [];
this.props.offers.forEach((offer) => {
offer.to.forEach((destination) => {
destinationIds.push(destination.destination);
});
});
this.props.getDestinations(destinationIds);
}
render() {
return (
<OffersGridLayout destinations={this.props.destinations} />
);
}
}
const mapStateToProps = function(store) {
return {
destinations: store.offersGridState.destinations
};
}
const mapDispatchToProps = function(dispatch) {
return {
getDestinations: function(ids) {
return destinationsApi.getDestinations(dispatch, ids);
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(OffersGridContainer);
现在一切正常了!代码如下:
提供商:
export default class OffersGridProvider extends React.Component {
constructor(props) {
super(props)
this.store = createStore(reducers, applyMiddleware(thunk));
}
render() {
return (
<Provider store={this.store}>
<OffersGridContainer offers={this.props.offers} />
</Provider>
);
}
}
容器:
class OffersGridContainer extends React.Component {
componentDidMount() {
const destinationIds = this.props.offers.reduce((acc, offer) => {
return [...acc, ...offer.to.map(d => d.destination)];
}, []);
this.props.getDestinations(destinationIds);
}
render() {
return (
<OffersGridLayout destinations={this.props.destinations} />
);
}
}
const mapStateToProps = function(store) {
return {
destinations: store.offersGridState.destinations
};
}
const mapDispatchToProps = function(dispatch) {
return {
getDestinations: function(ids) {
return dispatch(destinationsApi.getDestinations(ids));
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(OffersGridContainer);
API方法:
export function getDestinations(ids) {
return function(dispatch) {
const url = $('meta[name="site-url"]').attr('content');
const filter = ids.map((id) => {
return `filter[post__in][]=${id}`;
}).join('&');
return axios.get(`${url}/wp-json/wp/v2/destinations?filter[posts_per_page]=-1&${filter}`)
.then(response => {
return dispatch(getOffersGridSuccess(response.data));
});
}
}
最佳答案
我建议您使用 redux-thunk
包,而不是直接在组件中进行 api 调用。
接下来,您应该将 mapDispatchToProps
函数作为第二个参数传递给 connect
函数,以将操作创建器函数注入(inject)组件:
import { getDestinations } from '../actions';
class OffersGridContainer extends React.Component {
componentDidMount() {
// Tip.
const destinationIds = this.props.offers.reduce((acc, offer) => {
return [...acc, ...offer.to.map(d => d.destination)];
}, []);
// instead `destinationsApi.getDestinations(dispatch, destinationIds)`
// call action creator function
this.props.getDestinations(destinationIds);
}
render() {
return (
<OffersGridLayout destinations={this.props.destinations} />
);
}
}
const mapStateToProps = function(store) {
return {
destinations: store.offersGridState.destinations
};
}
const mapDispatchToProps = function(dispatch) {
return {
// this function will be available in component as
// `this.props.getDestinations`.
getDestinations: function(destinationIds) {
dispatch(getDestinations(destinationIds));
}
};
}
export default connect(mapStateToProps, mapDispatchToProps)(OffersGridContainer);
关于reactjs - 如何在 Redux 中为每个实例创建一个存储?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38821882/
我正在运行一个辅助角色,并检查 Azure 上托管的存储中是否存在数据。当我将连接字符串用于经典类型的存储时,我的代码可以正常工作,但是当我连接到 V2 Azure 存储时,它会抛出此异常。 “远程服
在我的应用程序的主页上,我正在进行 AJAX 调用以获取应用程序各个部分所需的大量数据。该调用如下所示: var url = "/Taxonomy/GetTaxonomyList/" $.getJSO
大家好,我正在尝试将我的商店导入我的 Vuex Route-Gard。 路由器/auth-guard.js import {store} from '../store' export default
我正在使用 C# 控制台应用程序 (.NET Core 3.1) 从 Azure Blob 存储读取大量图像文件并生成这些图像的缩略图。新图像将保存回 Azure,并将 Blob ID 存储在我们的数
我想将 Mlflow 设置为具有以下组件: 后端存储(本地):在本地使用 SQLite 数据库存储 Mlflow 实体(run_id、params、metrics...) 工件存储(远程):使用 Az
我正在使用 C# 控制台应用程序 (.NET Core 3.1) 从 Azure Blob 存储读取大量图像文件并生成这些图像的缩略图。新图像将保存回 Azure,并将 Blob ID 存储在我们的数
我想将 Mlflow 设置为具有以下组件: 后端存储(本地):在本地使用 SQLite 数据库存储 Mlflow 实体(run_id、params、metrics...) 工件存储(远程):使用 Az
我的 Windows 计算机上的本地文件夹中有一些图像。我想将所有图像上传到同一容器中的同一 blob。 我知道如何使用 Azure Storage SDKs 上传单个文件BlockBlobServi
我尝试发出 GET 请求来获取我的 Azure Blob 存储帐户的帐户详细信息,但每次都显示身份验证失败。谁能判断形成的 header 或签名字符串是否正确或是否存在其他问题? 代码如下: cons
这是用于编写 JSON 的 NeutralinoJS 存储 API。是否可以更新 JSON 文件(推送数据),而不仅仅是用新的 JS 对象覆盖数据。怎么做到的??? // Javascript
我有一个并行阶段设置,想知道是否可以在嵌套阶段之前运行脚本,所以像这样: stage('E2E-PR-CYPRESS') { when { allOf {
我想从命令行而不是从GUI列出VirtualBox VM的详细信息。我对存储细节特别感兴趣。 当我在GUI中单击VM时,可以看到包括存储部分在内的详细信息: 但是到目前为止,我还没有找到通过命令行执行
我有大约 3500 个防洪设施,我想将它们表示为一个网络来确定流动路径(本质上是一个有向图)。我目前正在使用 SqlServer 和 CTE 来递归检查所有节点及其上游组件,只要上游路径没有 fork
谁能告诉我 jquery data() 在哪里存储数据以及何时删除以及如何删除? 如果我用它来存储ajax调用结果,会有性能问题吗? 例如: $("body").data("test", { myDa
有人可以建议如何为 Firebase 存储中的文件设置备份。我能够备份数据库,但不确定如何为 firebase 存储中的文件(我有图像)设置定期备份。 最佳答案 如何进行 Firebase 存储的本地
我最近开始使用 firebase 存储和 firebase 功能。现在我一直在开发从功能到存储的文件上传。 我已经让它工作了(上传完成并且文件出现在存储部分),但是,图像永远保持这样(永远在右侧加载)
我想只允许用户将文件上传到他们自己的存储桶中,最大文件大小为 1MB,仍然允许他们删除文件。我添加了以下内容: match /myusers/{userId}/{allPaths=**} { al
使用生命周期管理策略将容器的内容从冷访问层移动到存档。我正在尝试以下策略,希望它能在一天后将该容器中的所有文件移动到存档层,但事实并非如此在职的。我设置了选择标准“一天未使用后”。 这是 json 代
对于连接到 Azure 存储端点,有 http 和 https 两个选项。 第一。 https 会带来开销,可能是 5%-10%,但我不支付同一个数据中心的费用。 第二。 http 更快,但 Auth
有人可以帮我理解这一点吗?我创建了Virtual Machine in Azure running Windows Server 2012 。我注意到 Azure 自动创建了一个存储帐户。当我进入该存
我是一名优秀的程序员,十分优秀!