Redux -- can two containers share state? - reactjs

Question

I am super new to both React and Redux. I am at the point where I am trying to bring several containers into a parent container, a form.
I started by creating a Select component that is reused by using Redux.
The Select component has one set of actions. But there are unique reducers for each of the instances of the Select component. All come together by creating a container for each instance of the Select. (See code below).
The Select containers work perfectly. And the coexist on the same page without a problem.
So now I want to "wire them" into a form. The form needs to know what value the user has selected. So I thought I could do that by mapping properties for the form to the appropriate bits of state associated with the Select containers. That works for initialization but when I select an item from one of the Select containers the new value is not reflected in the form container.
Can this be done?
/reducers/base_reducers/SingleSelect.js
import { FETCH_ITEMS, ADD_ITEM, SET_VALUE, SHOW_LOADING, SHOW_ERROR } from "../../constants";
// Defines STATE for the SingleSelect component and initial defaults. Any key with a value of 'DEFINE'
// must be INITIALIZED in the model reducer. Remaining items can also be modified or left as initialized here.
export const base_reducer_single_select_state = {
namespace: 'DEFINE',
componentId: 'DEFINE',
items: ['DEFINE',],
defaultValue: 'DEFINE',
selectItem: '0',
allowAdd: true,
validationRegEx: /^[a-zA-Z ]*$/,
regExDescription: 'letters and spaces.',
errorMessage: '',
isError: false,
isLoading: false,
apiRoute: 'DEFINE',
};
// Processes state changes from actions for the Simple Select component.
export function base_reducer_single_select(state, action) {
switch (action.type) {
case `${state.namespace}/${FETCH_ITEMS}`:
action.items.unshift(state.defaultValue);
return {...state, "items": action.items};
case `${state.namespace}/${ADD_ITEM}`:
return {...state, "selectItem": action.itemValue};
case `${state.namespace}/${SET_VALUE}`:
return {...state, "selectItem": action.newValue};
case `${state.namespace}/${SHOW_ERROR}`:
return {...state,
"isError": action.trueFalse,
"errorMessage": action.message};
case `${state.namespace}/${SHOW_LOADING}`:
return {...state, "isLoading": action.value};
default:
return state;
}
}
And here are a couple of the reducers that implement the generic SimpleSelect reducer:
/reducers/City.js
import { base_reducer_single_select, base_reducer_single_select_state } from './base_reducers/SingleSelect';
import { getNamespace } from '../helpers';
const defaultValue = {id: 0, name: "- Select city -"};
const initialState = {
...base_reducer_single_select_state,
namespace: getNamespace(),
componentId: 'City',
items: [
defaultValue,
],
defaultValue: defaultValue,
apiRoute: '/api/cities/',
};
export default function city(state=initialState, action) {
return base_reducer_single_select(state, action);
}
/reducers/State.js
import { base_reducer_single_select, base_reducer_single_select_state } from './base_reducers/SingleSelect';
import { getNamespace } from '../helpers';
const defaultValue = {id: 0, name: '- Select state -'};
const initialState = {
...base_reducer_single_select_state,
namespace: getNamespace(),
componentId: 'State',
items: [
defaultValue,
],
defaultValue: defaultValue,
apiRoute: '/api/states/',
};
export default function state_name(state=initialState, action) {
return base_reducer_single_select(state, action);
}
Their containers:
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import SingleSelectComponent from '../components/SingleSelectComponent';
import * as CityActions from '../actions/SingleSelect';
const mapStateToProps = state => {
return {
namespace: state.city.namespace,
componentId: state.city.componentId,
items: state.city.items,
selectItem: state.city.selectItem,
allowAdd: state.city.allowAdd,
validationRegEx: state.city.validationRegEx,
regExDescription: state.city.regExDescription,
errorMessage: state.city.errorMessage,
isError: state.city.isError,
isLoading: state.city.isLoading,
apiRoute: state.city.apiRoute
};
};
function mapDispatchToProps(dispatch) {
return {actions: bindActionCreators(CityActions, dispatch)};
}
const CityContainer = connect(
mapStateToProps,
mapDispatchToProps
)(SingleSelectComponent);
export default CityContainer;
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import SingleSelectComponent from '../components/SingleSelectComponent';
import * as StateActions from '../actions/SingleSelect';
const mapStateToProps = state => {
return {
namespace: state.state_name.namespace,
componentId: state.state_name.componentId,
items: state.state_name.items,
selectItem: state.state_name.selectItem,
allowAdd: state.state_name.allowAdd,
validationRegEx: state.state_name.validationRegEx,
regExDescription: state.state_name.regExDescription,
errorMessage: state.state_name.errorMessage,
isError: state.state_name.isError,
isLoading: state.state_name.isLoading,
apiRoute: state.state_name.apiRoute
};
};
function mapDispatchToProps(dispatch) {
return {actions: bindActionCreators(StateActions, dispatch)};
}
const StateNameContainer = connect(
mapStateToProps,
mapDispatchToProps
)(SingleSelectComponent);
export default StateNameContainer;
And the "form" container (which is not a form yet as I'm just doing the initial testing)
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import CompanyInfoComponent from '../components/CompanyInfoComponent';
import * as CompanyInfoActions from '../actions/CompanyInfo';
const mapStateToProps = state => {
return {
namespace: state.company_info.namespace,
componentId: state.company_info.componentId,
childCityValue: state.city.selectItem,
childStateValue: state.state_name.selectItem,
childCountryValue: state.country.selectItem,
validationRegEx: state.company_info.validationRegEx,
regExDescription: state.company_info.regExDescription,
errorMessage: state.company_info.errorMessage,
isError: state.company_info.isError,
isLoading: state.company_info.isLoading,
apiRoute: state.company_info.apiRoute
};
};
function mapDispatchToProps(dispatch) {
return {actions: bindActionCreators(CompanyInfoActions, dispatch)};
}
const CompanyInfoContainer = connect(
mapStateToProps,
mapDispatchToProps
)(CompanyInfoComponent);
export default CompanyInfoContainer;
Again, the initial values are showing up correctly. But when state changes, meaning for instance, when I select a City, the state is changing when I examine state associated with the city (state.city.selectItem) but that is not being reflected in the CompanyInfo container.
Thanks in advance for your time reading all that code and any insight/help you can provide.