javascript - que - ha fallado la carga del script con origen

Envíe una acción de Redux con la acción subsiguiente como carga útil para mostrar una barra de aperitivos o un diálogo de IU material.

Question

Estoy usando React with Redux y Material UI para construir una aplicación web. La aplicación web está compuesta de varias páginas y componentes. Sé que un snack bar o diálogo debe estar conectado directamente con lo que el usuario está haciendo. Sin embargo, me gustaría que la cafetería y el diálogo sean independientes en las páginas y los componentes. Por lo tanto, un caso de uso muestra un mensaje como background synchronization of your data failed y una acción retry now . Mi idea era presentar la barra de aperitivos en una página llamada RootFrame , que se usa para envolver todas las demás páginas y enviar el texto de la barra de aperitivos como carga de una acción.

Mi acción de Redux para mostrar una cafetería:

export function showSnackbar(message: string) {
  return {
    type: SHOW_SNACKBAR,
    payload: message
  };
}

Por supuesto, también podría ser bueno especificar el mensaje en la acción en lugar de tomar el mensaje como argumento, pero ese no es mi problema en este momento. El problema es: ¿cómo puedo usar este sistema y mostrar un snack bar con una acción? ¿Puedo cambiar mi acción a

export function showSnackbar(message, action) {
  return {
    type: SHOW_SNACKBAR,
    payload: {
      message, 
      action
    }
  };
}

y renderizar mi RootFrame bar en el RootFrame

<Snackbar
  message={this.props.message}
  ref=''snackbar''
  onDismiss={() => this.props.dispatch(dismissSnackbar())}
  action=''retry now''
  onActionTouchTap={() => this.props.dispatch(this.props.action)}
/>;

Cuando se descarta la barra de refrigerios, una acción cambia una variable en el estado: snackbar.visible = false . Esto se usa para activar la barra de snack (se representa cuando snackbar.visible === true ). Cuando el usuario haga clic en retry now , se debe enviar la acción para iniciar la sincronización (que se pasa al componente como accesorios). El problema es muy similar cuando se usan diálogos. Por lo tanto, no solo el texto para mostrar, sino también las próximas acciones posibles deben pasarse al componente.

¿Crees que usar Redux así está bien o hay una mejor solución?

Answer 1

En realidad, ahora mismo usamos redux un poco. Usamos createAction de redux-act , apropiadamente usamos createReducer más. En un componente usamos connect decorator o class de react-redux . El conector proporciona estado reducido, acciones enviadas, accesorios para padres. Entonces, para nuestra cafetería tenemos:

1. comportamiento:

   export const showMessageTop = createAction();
   export const closeMessageTop = createAction();

2. Reductor:

   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''
                  : '''',
     }
   )

3. Y un componente (use decorador en lugar de clase):

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

Entonces en los accesorios actuales tenemos this.props.messageText . Y podemos mostrar esta barra si tenemos un mensaje, o podemos invocar closeAction que configura messageText en una cadena vacía.