Question

我对React和Redux都是新手。我正要把几个容器放入父容器（一种表格）中。

我首先创建了一个Select组件，该组件通过使用Redux可以重用。

“选择”组件具有一组操作。但是Select组件的每个实例都有唯一的化简器。通过为Select的每个实例创建一个容器，将所有元素组合在一起。（请参见下面的代码）。

Select容器运行完美。并且在同一页上共存没有问题。

现在，我想将它们“关联”成表格。 表单需要知道用户选择了什么值。因此，我认为可以通过将表单的属性映射到与Select容器相关的适当状态位来做到这一点。 这对于初始化有效，但是当我从“选择”容器之一中选择一个项目时，新值不会反映在表单容器中。

可以做到吗？

/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;
    }
}

下面是实现通用SimpleSelect减速器的几个减速器：

/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);
}

他们的容器：

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;

还有“表单”容器（这不是表单，因为我只是在进行初始测试）

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;

同样，初始值正确显示。但是，当状态发生变化时（例如，当我选择一个城市时），当我检查与该城市关联的状态（state.city.selectItem）时，状态即发生变化，但是这并未反映在CompanyInfo容器中。

提前感谢您阅读所有代码以及您可以提供的任何见解/帮助。

Redux-两个容器可以共享状态吗？

0 个答案: