arena-redux

SETUP

npm i arena-redux

ACTIONS

environment

1. initEnvironment

   initEnvironment(type = 'WINDOW_RESIZE')

   Prepares screen height and width, and prepares the resize function to update the variables on window.onresize. We usually fire this in the componentWillMount method of the root App component.

   Note: If you're using the Arena Redux environment reducer, then you can leave the default action type in place, as it's shared by the reducer.

   Example

   import {initEnvironment} from 'arena-redux'
    
   class Root extends Component {
     componentWillMount() {
       dispatch(initEnvironment())
     }
   }

form

1. autofill

   autofill(formName, fields)

   Takes a form name and an object with key/value pairs mapped to fieldName: value.

   Example

   import {autofill} from 'arena-redux'
    
   const fields = {
     firstName: 'Ted',
     lastName: 'Cruz',
   }
    
   dispatch(autofill('MY_FORM', fields))

router

1. navigateTo

   navigateTo(route, shouldPushState = true, type = 'CHANGE_ROUTE')

   Takes a route object, your action type, and a flag for the HTML5 history.pushState() method to update the browser URL. Since this is one of the actions used frequently and takes an action type, it's best to create an action wrapper.

   Note: If using the Arena Redux router reducer, you can leave the default action type.

   Example

   import {navigateTo as arenaNavigateTo} from 'arena-redux'
    
   export const navigateToStateless = (route, shouldPushState = false) => dispatch => {
     dispatch(arenaNavigateTo(route, shouldPushState))
   }

   import {navigateToStateless} from './actions'
   import * as paths from './paths'
    
   dispatch(navigateToStateless({
     keys: {},
     options: {},
     path: paths.HOME,
   }))

2. navigateBack

   navigateBack(event, type = 'CHANGE_ROUTE')

   Takes an event object and an action type, and uses navigateTo to go to the previous URL. shouldPushState is passed as false.

   Example

   import {navigateBack as arenaNavigateBack} from 'arena-redux'
    
   export const navigateBack = e => dispatch => {
     dispatch(arenaNavigateBack(e))
   }

3. initRouter

   initRouter(paths, type = 'CHANGE_ROUTE')

   Takes an array of strings (relative paths) and the action type you use for navigation. Like initEnvironment, this is fired once on the root component.

   Example

   import {initEnvironment, initRouter} from 'arena-redux'
    
   class Root extends Component {
     componentWillMount() {
       dispatch(initEnvironment(types.WINDOW_RESIZE))
       dispatch(initRouter(this.props.paths, 'CHANGE_ROUTE'))
     }
   }

   Note: There are more steps to set up routing, you need to also map each path to a container, and use a Router component to serve up the right one.

UTILS

router

function	description
compileOptions(options)	Maps the option keys and joins options with &
compileHash(route)	Generates a URL hash with the path, keys, and options
pushState(route)	Updates history.pushState() with compiled hash
parseRouteKeys(pathString, result)	Parses the route keys using RegExp.exec()
parseRouteOptions(options)	Splits the route option string and reduces an object
parseRoute(hash, paths)	Uses the two parser functions to parse a route
changeUrl(route)	Updates location.href
getBaseUrl()	Gets protocol, host, and pathname from location

api

function	description