Question

在我的项目中，我希望能够为登录和注册帐户等事件调度模式弹出窗口。我遇到的问题是我希望它们可以用于任何目的，但我不确定如何以“React方式”进行操作。起初，我想过这样做：

/constants/Modal.js

export const DISPATCH = 'MODAL/DISPATCH';
export const UPDATE = 'MODAL/UPDATE';
export const DISMISS = 'MODAL/DISMISS';

/actions/Modal.js

import {
    DISPATCH,
    UPDATE,
    DISMISS
} from '../constants/Modal';

export function dispatch(type, props) {
    return {
        type: DISPATCH,
        payload: {type, props}
    };
}

export function update(props) {
    return {
        type: UPDATE,
        payload: {props}
    };
}

export function dismiss() {
    return {type: DISMISS};
}

/reducers/Modal.js

import {Map} from 'immutable';

import {
    DISPATCH,
    UPDATE,
    DISMISS
} from '../constants/Modal';

const initialState = Map({
    type: '',
    props: Map(),
    isDispatched: false
});

export default function modalReducer(state = initialState, action) {
    switch (action.type) {
        case DISPATCH:
            return state.set('type', action.payload.type)
                .set('props', Map(action.payload.props))
                .set('isDispatched', true);
        case UPDATE:
            return state.set('props', Map(action.payload.props));
        case DISMISS:
            return state.set('isDispatched', false);
        default:
            return state;
    }
}

然后

组件将触发这些操作，然后ModalContainer组件将基于state.modal.get('type')呈现相应的弹出窗口并将state.modal.get('props')传递给Modal组件。这个问题是道具最终将包括组件的子项和各种方法，这些方法在商店中没有业务。如何在不执行像React.render(<Modal {...props}>, document.getElementById('modal-container'))这样的内容的情况下，从不是ModalContainer组件的子组件的组件中呈现弹出窗口？

Answer 1

我描述了一种类似的方式进行模态对话in this answer 根据我的经验，我只是不传递有效载荷的非序列化道具。

例如，我不是传递子代，而是将行为封装在适当的模态组件本身中，例如<DeleteUserModal kind='sad' userId={42} hasErrors={false} />。然后，如果需要，最多可以DeleteUserModal连接到商店，检索所需的数据，分派操作，并选择要呈现的子项。

或者你可以完全避免通过Redux路由模态，只需使用react-modal之类的东西，它实际上是为你做的：

做像React.render(<Modal {...props}>, document.getElementById('modal-container'))?
这样的asinine

（这不是asinine，人们称这种模式为“门户网站”。）

使用React，Redux和Immutable.js创建模态弹出窗口

1 个答案: