如果我两次使用相同的反应/冗余组件，它们会共享状态吗?

If I'm using the same react/redux component twice, will they share state?

本文关键字：组件 冗余 状态 共享 两次 如果      更新时间：2023-09-26

如果我有一个组件，它被加载到一个页面中，接受了一些道具，进行了几次API调用并呈现了一个列表，它们会共享相同的redux存储吗？

比如说... 

<Trending data-limit=5 data-offset=0 />
<div>Something here</div>
<Trending data-limit=5 data-offset-5 />

我有类似的东西，它们似乎相互覆盖。

如果你的意思是 React State，那么不。

如果你的意思是 Redux 存储状态，通过 mapStateToProps 或其他方式，并且你的反应组件连接到存储状态中的同一端点，那么是的

例如：假设您有mapStateToPros将组件的道具链接到商店 State.App.User.Info.email 的端点

如果电子邮件更改，映射到此端点的所有组件都将更新

另一方面，如果您使用自己的数据调用每个组件，那么每个组件都位于自己的空间中，就像您在问题中给出的示例一样。

我整理了一个示例来展示如何将同一组件与两个不同的 Redux 容器一起使用，这些容器可用于以不同的方式填充存储。我现在实际上很困惑，因为两个化简器覆盖了相同的状态，尽管被组合化简器分开。

例：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';
const ParentComponent = React.createClass({
  propTypes: {
    fetchData: React.PropTypes.func.isRequired,
    data: React.PropTypes.string
  },
  componentDidMount: function () {
    setTimeout(() => {
      this.props.fetchData();
    }, 2000);
  },
  render: function () {
    return (
      <div>{this.props.data}</div>
    );
  }
});
const ParentComponentContainer = React.createClass({
  render: function () {
    return (<ParentComponent {...this.props} />);
  }
});
const mapStateToPropsFoo = (state) => {
  if (state.exampleReducerFoo && state.exampleReducerFoo.data) {
    return {
      data: state.exampleReducerFoo.data
    }
  }
  return {};
};
const mapStateToPropsBar = (state) => {
  if (state.exampleReducerBar && state.exampleReducerBar.data) {
    return {
      data: state.exampleReducerBar.data
    }
  }
  return {};
};
const mapDispatchToPropsFoo = (dispatch) => {
  return {
    fetchData: () => {
      dispatch({
        type: 'RECEIVE_DATA',
        data: 'foo'
      });
    }
  }
};
const mapDispatchToPropsBar = (dispatch) => {
  return {
    fetchData: () => {
      dispatch({
        type: 'RECEIVE_DATA',
        data: 'bar'
      });
    }
  }
};
const reducers = combineReducers({
  exampleReducerFoo: (state = {}, action) => {
    switch (action.type) {
      case 'RECEIVE_DATA':
        return Object.assign({}, state, {
          data: action.data
        });
      default:
        return state;
    }
  },
  exampleReducerBar: (state = {}, action) => {
    switch (action.type) {
      case 'RECEIVE_DATA':
        return Object.assign({}, state, {
          data: action.data
        });
      default:
        return state;
    }
  }
});
const store = createStore(reducers);
const ConnectedParentComponentContainerFoo = connect(mapStateToPropsFoo, mapDispatchToPropsFoo)(ParentComponentContainer);
const ConnectedParentComponentContainerBar = connect(mapStateToPropsBar, mapDispatchToPropsBar)(ParentComponentContainer);
ReactDOM.render(<Provider store={store}><div><ConnectedParentComponentContainerFoo data="aaa"/>something<ConnectedParentComponentContainerBar data="bbb"/></div></Provider>, document.getElementById('ReactApp'));

当状态到达mapStateToProps函数时，它的形状是：

{
  exampleReducerBar: {
    data: 'bar'
  },
  exampleReducerFoo: {
    data: 'bar'
  }
}

我希望化简器在状态中写入自己的空间（reducerBar 的数据应该是 'bar'，reducerFoo 的数据应该是 'foo'），但显然即使化简器在使用 combineReducers 时塑造状态，状态也在化简器之间共享。我很困惑。

相关文章：