You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat(core): allow attaching action creators to routes, and more...
FEATURE: Allow attaching action creators to routes – turn URL params to Redux state automatically.
FEATURE: Allow dynamic routes – can now route with an array of data as well as a URL string.
FEATURE: Add getState helper function – no longer need to pass initial state from server to client.
BREAKING CHANGE: structure of routes has changed from a function to an array.
Before:
```js
const routes = url => {
const path = url.split( '?' )[ 0 ];
const query = qs.parse( qs.extract( url ));
switch ( path ) {
case '/about':
return <About />;
case '/hello':
return <Hello name={ query.name } />;
case '/':
return <Home />;
default:
return <NotFound />;
}
};
```
After:
```js
const routes = [
[ 'about', <About /> ],
[ 'hello', { name: updateName }, <Hello /> ],
[ '/', <Home /> ],
[ '*', <NotFound /> ],
];
```
This now allows dynamic routes and attaching action creators to routes to handle params.
BREAKING CHANGE: Link component now takes **to** prop, not **url** prop.
Before:
```
<Link url="/">Home</Link>
```
After:
```
<Link to="/">Home</Link>
```
This now allows Link component to also take a *to* array:
```
<Link to={[ 'users', id, 'followers', { page: 2 }]}>Followers</Link>
```
BREAKING CHANGE: updateUrl action creator has been removed from the public API in favour of changePageTo.
Before:
```
dispatch( updateUrl( '/' ))
```
After:
```
dispatch( changePageTo( '/' ))
```
This now allows us to also pass in a *to* array:
```
dispatch( changePageTo([ 'users', id, 'followers', { page: 2 }]))
```
BREAKING CHANGE: now requires routerMiddleware.
Before: none
After:
```js
const middleware = applyMiddleware( routerMiddleware( routes, { isServer }));
const store = createStore( reducer, state, middleware );
```
This allows us to batch the action creators we have attached to our routes into one dispatch.
BREAKING CHANGE: now requires routerReducer instead of Redux combineReducers.
Before:
```js
const reducer = combineReducers({ ...reducers, url: urlReducer });
```
After:
```js
const reducer = routerReducer( reducers );
```
Notice how urlReducer is no longer needed.
BREAKING CHANGE: now handles popstate by default.
No need to add listener and dispatch updateUrl manually.
Before:
```js
window.addEventListener( 'popstate', () => {
const { hash, pathname, search } = window.location;
const url = pathname + search + hash;
store.dispatch( updateUrl( url ));
});
```
After: none
0 commit comments