在我的项目中,我希望能够调度模式弹出窗口以进行登录和注册帐户等操作。我遇到的问题是我希望它们能够用于任何目的,但我不确定如何以“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')
到模态组件。这样做的问题是, Prop 最终会包括组件的子组件和各种方法,这些组件与存储中没有关系。如何在不执行类似 React.render(<Modal {...props}>, document.getElementById('modal-container'))
之类的愚蠢操作的情况下,从不是 ModalContainer 组件子级的组件中渲染弹出窗口?
最佳答案
我描述了一种类似的模态对话方式 in this answer .
根据我的经验,我只是不将不可序列化的 props 与有效负载一起传递。
<DeleteUserModal kind='sad' userId={42} hasErrors={false} />
。然后是 DeleteUserModal
必要时连接到存储,检索所需的数据,分派(dispatch)操作,并选择要渲染的子项。
或者,您可以完全避免通过 Redux 路由模态,而只使用类似 react-modal 的内容。它实际上为你做到了这一点:
doing something asinine like
React.render(<Modal {...props}>, document.getElementById('modal-container'))?
(这并不愚蠢,人们称这种模式为“门户”。)
关于javascript - 使用 React、Redux 和 Immutable.js 创建模式弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35499819/