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将组件的道具链接到商店State.App.User.Info.email的此终点

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

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

Answer 2

我汇总了一个示例，说明如何将相同的组件与两个不同的Redux容器一起使用，这些容器可用于以不同方式填充存储。我现在感到困惑，因为两个reducers覆盖了相同的状态，尽管被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的数据应该是＆＃39; bar＆＃39;而reducerFoo的数据应该是＆＃39; foo＆＃39 ;），但显然即使减速器在使用combineReducers时塑造状态，状态也在减速器之间共享。我很困惑。

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

2 个答案: