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

Question

If I had a component, which was loaded into a page, accepted a few props, made a couple of API calls and rendered a list, would they share the same redux store?

Say for example...

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

I have something similar to this and they seem to override each other.

Answer 1

If you mean React State, then no.

If you mean Redux Store State, by mapStateToProps or other way and your react component are connected to the same end point in the storeState then Yes

ex : let's say you have mapStateToPros linking the props of the component to this end point of the store State.App.User.Info.email

If email changes all component mapped to this end point will update

In the other hand if you're calling each component with it's own data, then each component lives in it's own space like the example you gave in your question

Answer 2

I put together an example to show how to use the same component with two different Redux containers that could be used to populate the store differently. I am actually confused now because the two reducers overwrite the same state, despite being separated by combineReducers.

Example:

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'));

When the state gets to the mapStateToProps functions it's shape is:

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

I expected the reducers to be writing to their own space in the state (reducerBar's data should be 'bar' and reducerFoo's data should be 'foo'), but apparently even though the reducers shape the state when using combineReducers, the state is shared between reducers. I am confused.