如果我两次使用相同的 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

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

如果你的意思是 Redux Store State，通过 mapStateToProps 或其他方式，并且你的 react 组件连接到 storeState 中的同一端点，那么是

ex : 假设你有 mapStateToPros 将组件的 props 链接到商店 State.App.User.Info.email 的这个端点

如果电子邮件发生变化，映射到该端点的所有组件都会更新

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

Answer 2

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

例子：

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 时塑造状态，状态在减速器之间共享。我很困惑。