Router as a View in React
Location bar is a view of store
This project is based on react, immutable and actions-recorder.
Demo http://repo.react-china.org/router-as-view
Initial idea
Router is part of MVC and we can certainly divide it into M, C and V for better managements.
It's like react-redux-router but designed based on actions-recorder.
Ideas behind it: Router is a View
Usage
npm i --save router-as-viewRouter DSL is defined in an immutable Map:
Addressbar = require 'router-as-view'
pathUtil = require 'router-as-view/lib/path'
routes = Immutable.fromJS
home: [] # means / or /home
demo: [] # means /demo
team: ['teamId'] # means /team/:teamId
room: ['roomId'] # means /room/:roomId
'中文': ['中文'] # means /中文/:中文
# oldAddress = "#{location.pathname}#{location.search}" # for history API
oldAddress = location.hash.substr(1) # to remove sharp mark
router = pathUtil.parseAddress oldAddress, routes
store = store.set 'router', routerNotice that 2 of the paths are different:
-
homeis generated when/or/homeis found -
404is generated when no router is found
M part, add initial router object in store. It looks like:
name: 'team'
data:
teamId: '12'
query:
isPrivate: 'true'
router: # nested router is parsed from address directly
name: 'room'
data:
roomId: '34'
query: {}
router: nullParameters and querystrings are supported. Get this from store and render the page.
"V" part, mount Addressbar component to manipulate History API:
Addressbar
router: store.get('router')
routes: routes
onPopstate: (info, event) ->
# figure out the new router object and dispatch a `router/go` action
inHash: true # fallback to hash from history API
skipRendering: false # true to allow model/view inconsistency during loading"C" part, connect action to store:
switch actionType
when 'router/go' # <--- bind this action
router.go store, actionData
else
console.warn ":Unknown action type: #{actionType}"
storeRead src/ for details.
Notice
- keep in mind that
router-as-viewis totally based onimmutable-js. - if you need to route asynchronously, try set
skipRenderingtotrueduring loading -
undefinedvalue is eliminated on purpose, fire an issue if you think differenly.
License
MIT
