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

【问题标题】：Creating modal popups with React, Redux, and Immutable.js使用 React、Redux 和 Immutable.js 创建模态弹出窗口
【发布时间】：2016-02-19 07:33:37
【问题描述】：

在我的项目中，我希望能够为诸如登录和注册帐户之类的事情发送模式弹出窗口。我遇到的问题是我希望它们能够用于任何目的，但我不确定如何以“反应方式”来做到这一点。起初，我想这样做：

/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 组件。这样做的问题是 props 最终会包括组件的子组件和各种方法，它们在商店中没有任何业务。如何在不执行 React.render(<Modal {...props}>, document.getElementById('modal-container')) 之类的愚蠢操作的情况下从不是 ModalContainer 组件的子组件的组件中呈现弹出窗口？

【问题讨论】：

标签： javascript reactjs popup redux immutable.js

【解决方案1】：

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

例如，我不会传递孩子，而是将行为封装在适当的模态组件本身中，例如<DeleteUserModal kind='sad' userId={42} hasErrors={false} />。然后由DeleteUserModal 在必要时连接到存储，检索它需要的数据，调度操作，并选择要渲染的子级。

或者，您可以完全避免通过 Redux 路由模式，而只需使用类似 react-modal 的东西，它实际上会为您做到这一点：

做一些像React.render(<Modal {...props}>, document.getElementById('modal-container'))?这样愚蠢的事情

（这并不愚蠢，人们称这种模式为“门户”。）

【讨论】：