Global action

[vanhtuan0409]

Is it possible to have an event that can be listened by multiple models 😄 For example, I have a listener that fire action every time screen media query changed. This action needs to be listened by multiple ui state models

[llh911001]

Yes of course, just connect mediaQuery model's state for your ui state.

For your example, here is a possible solution:

import mirror, { actions } from 'mirrorx'

mirror.model({
  name: 'mediaQuery',
  initialState: {
    width: 0,
    height: 0
  },
  reducers: {
    change(state, data) {
      return { ...state, ...data }
    }
  }
})

// in your media query change event
actions.mediaQuery.change({ width, height })

// components that need to update when media query change
import Comp from './components/Comp'

const MyComponent = connect(state => {
  return {
    mediaQuery: state.mediaQuery,
    stateOfComp: state.stateOfComp
  } 
})(Comp)

[vanhtuan0409]

Your suggestion is what I doing right now But can 1 model reducers listen to action of another model Like can stateOfComp model listen to action from mediaQuery model

[llh911001]

You can. Try the mirror.hook API, though you should be careful to update state in hooks.