有时，在 Redux 应用程序中为每个实例创建一个存储会很有用。 Redux 的创建者自己创建了一个 Gist 来描述如何实现这一点：https://gist.github.com/gaearon/eeee2f619620ab7b55673a4ee2bf8400 https://gist.github.com/gaearon/eeee2f619620ab7b55673a4ee2bf8400
我已经在 Gist 中问过这个问题，但我认为 StackOverflow 是解决这个问题的更好地方：
我想知道如何dispatch对组件自己的特殊存储的操作？有没有办法访问store- 的支柱<Provider />对于每个<SubApp />（及其子组件）？
例如：我有一些 API 类调用dispatch从远程服务器获取数据后。但由于我无法导入“普通”存储，那么处理自定义存储以使它们可用于其他类/文件/服务的最佳方法是什么？
Update 1
所以我让它工作了，但我认为这是一种非常肮脏的方式（注意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>
);
}
}
容器：
提供者注入一个dispatch方法用于this存储到我的OffersGridContainer我可以用它来将操作分派到该实例的存储：
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;
});
}
Update 2
刚刚收到有关的提示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);
更新3（最终答案）
现在一切正常了！下面是代码：
提供商：
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));
});
}
}
