如果我两次使用相同的react / redux组件，它们会共享状态吗？

Question

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

举例来说...

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

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

Answer 1

如果您的意思是反应状态，则否。

如果您是通过mapStateToProps或其他方式表示Redux Store State，并且您的react组件已连接到storeState中的同一端点，则是

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

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

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

Answer 2

我整理了一个示例，展示了如何将相同的组件与两个不同的Redux容器一起使用，这些容器可用于不同地填充商店。 我现在实际上很困惑，因为尽管两个reducer被combinedReducers隔开，但它们会覆盖相同的状态。

例：

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'
  }
}

我期望reducer会在状态中写入自己的空间（reducerBar的数据应为'bar'，而reducerFoo的数据应为'foo'），但是显然，即使reducers在使用CombineReducers时会调整状态，状态仍会在减速。 我很困惑。