redux-css simple example

redux-css.js

import { createStore, applyMiddleware, compose } from 'redux'
import reduxCSS from 'redux-css'
import reducers from './reducers'

/*
  initial styles are the variables that we should set immediately.
  Note that '--' is optional, it will be added for you if you don't
  include it.
  
  Objects are flattened { myKey: { myNested: 'red' } } -> --myKeymyNested: red
*/
const initialStyles = {
  primary: {
    BG: '#303641',
  },
  navbar: {
    Height: '55px',
    PaddingTop: '0px'
  }
}

const styleReducer = (vars = initialStyles, action, state) => {
  switch(action.type) {
    case 'DEVICE_ORIENTATION': {
      return {
        ...vars,
        navbar: {
          ...vars.navbar,
          Height: action.orientation === 'portrait'
            ? '55px'
            : '50px',
          PaddingTop: action.orientation === 'portrait'
            : '5px'
            : '0px' 
         }
      }
    }
  }
  return vars
}

const configureStore = (initialState = {}) => {

  // exposes: css.getVariable, css.setVariable, css.removeVariable, css.middleware
  const {
    middleware: cssMiddleware,
    ...css
  } = reduxCSS(
    // our style reducers
    styleReducer
  )

  const enhancers = compose(
    applyMiddleware(
      cssMiddleware
    )
  )

  const store = createStore(
    reducers,
    initialState,
    enhancers
  )

  return { store, css }
}