我正在将React与Redux和Material UI结合使用来构建webapp。该webapp由多个页面和组件组成。我知道,小吃店或对话框应直接连接到用户正在执行的操作。但是,我想使小吃栏和对话框独立于页面和组件。因此,用例正在显示诸如background synchronization of your data failed和动作之类的消息retry now。我的想法是在一个名为的页面上渲染快餐栏,该页面RootFrame用于包装所有其他页面,并将快餐栏的文本作为动作的负载进行分发。
background synchronization of your data failed
retry now
RootFrame
我的Redux动作以显示小吃栏:
export function showSnackbar(message: string) { return { type: SHOW_SNACKBAR, payload: message }; }
当然,最好在操作中指定消息而不是将消息作为参数,但这不是我现在的问题。问题是:如何使用此系统并显示带有动作的小吃店?我可以将动作更改为
export function showSnackbar(message, action) { return { type: SHOW_SNACKBAR, payload: { message, action } }; }
并RootFrame像这样渲染我的小吃店
<Snackbar message={this.props.message} ref='snackbar' onDismiss={() => this.props.dispatch(dismissSnackbar())} action='retry now' onActionTouchTap={() => this.props.dispatch(this.props.action)} />;
取消快餐栏后,操作将更改状态为的变量snackbar.visible = false。这用于激活快餐栏(在时呈现snackbar.visible === true)。当用户单击时retry now,应该调度启动同步的操作(作为道具传递给组件)。使用对话框时,问题非常相似。因此,不仅要显示的文本,而且还必须将下一个可能的操作传递给组件。
snackbar.visible = false
snackbar.visible === true
您认为像这样使用Redux可以吗,还是有更好的解决方案?
实际上,现在usign redux进行了一些更改。我们使用createActionfrom redux- act,正确地我们createReducer进一步使用。在组件中,我们使用connect装饰器或的类react- redux。连接器提供redux状态,调度的动作,父项道具。因此,对于我们的小吃店,我们有:
createAction
redux- act
createReducer
react- redux
动作:
export const showMessageTop = createAction();
export const closeMessageTop = createAction();
减速器:
import {createReducer} from 'redux-act'; import * as ac from '../actionCreators/messageTop'; export default createReducer( { [ac.showMessageTop]: (state, messageText) => ({messageText}), [ac.closeMessageTop]: () => ({messageText: ''}), }, { messageText: window.location.search === '?login=1' ? 'Welcome' : '', } )
import {closeMessageTop} from '../../actionCreators/messageTop'; import MessageTop from './MessageTop'; @connect(state => ({ // gettext: gettext(state.locale.messages), messageText: state.messageTop.messageText, })) export default class MessageTopContainer extends React.Component { ... <button onClick={...bindActionCreators({onClose: closeMessageTop}, dispatch)}/>
因此,在目前的道具中,我们拥有this.props.messageText。如果有消息,我们可以显示此栏,也可以调用以空字符串closeAction设置的栏messageText。
this.props.messageText
closeAction
messageText