LayoutStore.js

import { createReducer, createActions } from 'reduxsauce'
import Immutable from 'seamless-immutable'
import { sizes } from 'Themes/Media'


const { Types, Creators } = createActions({
  layoutSetWidth: ['width']
})

export const LayoutTypes = Types
export default Creators

const defaults = {
  isMobile: false,
  isTablet: false,
  isDeskop: false
}

export const getLayoutParams = ({ width }) => {
  switch (width) {
    case width <= sizes.s:
      return { ...defaults, isMobile: true }
    case width <= sizes.m:
      return { ...defaults, isTablet: true }
    case width > sizes.m:
      return { ...defaults, isDesktop: true }
    default:
      return defaults
  }
}

const LAYOUT_INITIAL_STATE = {
  ...getLayoutParams({ width: window.innerWidth }) // определяем значения при старте
}

export const layoutSetWidth = (state, { width }) => state.merge(getLayoutParams({ width }))

export const INITIAL_STATE = Immutable(LAYOUT_INITIAL_STATE)

export const reducers = createReducer(INITIAL_STATE, {
  [Types.LAYOUT_SET_WIDTH]: layoutSetWidth
})