diff --git a/CHANGELOG b/CHANGELOG new file mode 100644 index 0000000..2913ffd --- /dev/null +++ b/CHANGELOG @@ -0,0 +1,21 @@ +# Changelog + +All notable changes to this project will be documented in this file. + +## [Unreleased] + +* Update to the new history API (#89) + +## [1.0.0] - 2015-12-07 + +### Breaking + +* The `updatePath` action creator has been removed in favor of `pushPath` and `replacePath` (#38) +* We have added support for routing state (#38) +* Our actions are now [FSA compliant](https://github.com/acdlite/flux-standard-action) (#63) + +### Other + +* Redux DevTools should now work as expected (#73) +* As we no longer depend on `window.location`, `` should now work (#62) +* We've done lots of work on finding the right way to stop cycles, so hopefully we shouldn't have any unnecessary location or store updates (#50) \ No newline at end of file diff --git a/README.md b/README.md index 47bdc5e..5aa14aa 100644 --- a/README.md +++ b/README.md @@ -1,75 +1,60 @@ - # redux-simple-router -[![npm version](https://img.shields.io/npm/v/redux-simple-router.svg?style=flat-square)](https://www.npmjs.com/package/redux-simple-router) -[![npm downloads](https://img.shields.io/npm/dm/redux-simple-router.svg?style=flat-square)](https://www.npmjs.com/package/redux-simple-router) +[![npm version](https://img.shields.io/npm/v/redux-simple-router.svg?style=flat-square)](https://www.npmjs.com/package/redux-simple-router) [![npm downloads](https://img.shields.io/npm/dm/redux-simple-router.svg?style=flat-square)](https://www.npmjs.com/package/redux-simple-router) -*Let react-router do all the work.* +**Let react-router do all the work** :sparkles: -[Redux](https://github.com/rackt/redux) is cool. -[react-router](https://github.com/rackt/react-router) is neat. The -problem is that react-router manages an important piece -of your application state: the URL. If you are using redux, you want -your app state to fully represent your UI; if you snapshotted the app -state, you should be able to load it up later and see the same thing. +[Redux](https://github.com/rackt/redux) is awesome. [React Router](https://github.com/rackt/react-router) is cool. The problem is that react-router manages an important piece of your application state: the URL. If you are using redux, you want your app state to fully represent your UI; if you snapshotted the app state, you should be able to load it up later and see the same thing. -react-router automatically maps the current URL to a path down your -component tree, and continually does so with any URL changes. This is -very useful, but we really want to store this state in redux as well. +react-router does a great job of mapping the current URL to a component tree, and continually does so with any URL changes. This is very useful, but we really want to store this state in redux as well. -The entire state that we are interested in boils down to one thing: -the URL. This is an extremely simple library that just puts the URL in -redux state and keeps it in sync with any react-router changes. -Additionally, you can change the URL via redux and react-router will -change accordingly. +The entire state that we are interested in boils down to one thing: the URL. This is an extremely simple library that just puts the URL in redux state and keeps it in sync with any react-router changes. Additionally, you can change the URL via redux and react-router will change accordingly. -```js -npm install redux-simple-router -``` +##### _What about redux-router?_ + +[redux-router](https://github.com/rackt/redux-router) is another project which solves the same problem. However, it's far more complex. Take a quick look at [the code for this library](https://github.com/jlongster/redux-simple-router/blob/master/src/index.js)—it's extremely minimal. redux-router is much bigger and more complex. -## Isn't there already redux-router? +That said, redux-router is a fine project and has features this doesn't provide. Use it if you like it better. -[redux-router](https://github.com/rackt/redux-router) is another -project which solves the same problem. However, it's far more complex. -Just look at this code: the whole thing is only 68 lines of JS. -redux-router is much bigger and more complex. +**Compared with redux-router:** -That said, redux-router is a fine project and has features this -doesn't provide. Use it if you like it better. +* Much smaller and simpler. You don't need to learn another library on top of everything else. +* We encourage direct access of react-router APIs. Need server-side rendering, or something else advanced? Just read react-router's docs. +* We only store current URL and state, whereas redux-router stores the entire location object from react-router. -The differences between this and redux-router: +## Documentation -* Much smaller and simpler. You don't need to learn another library on - top of everything else. -* We encourage direct access of react-router APIs. Need server-side - rendering, or something else advanced? Just read react-router's - docs. -* The piece of state is just a URL string, whereas redux-router stores - the full location object from react-router. +0. [Usage](#how-to-use) + - [Installation](#installation) +0. [Tutorial](#tutorial) +0. [Examples](#examples) +0. [API](#api) + - [`syncReduxAndRouter(history, store, selectRouterState?)`](#syncreduxandrouter) + - [`routeReducer`](#routereducer) + - [`UPDATE_PATH`](#update-path) + - [`pushPath(path, state, { avoidRouterUpdate = false } = {})`](#pushpath) + - [`replacePath(path, state, { avoidRouterUpdate = false } = {})`](#replacepath) +0. [See also](#see-also) -This only depends on the `history.listen` function from react-router -and the `store.getState` and `store.subscribe` functions from redux. -It should be very future-proof with any versions of either libraries. +### Usage -## Examples +The idea of this library is to use react-router's functionality exactly like its documentation tells you to. You can access all of its APIs in routing components. Additionally, you can use redux like you normally would, with a single app state and "connected" components. It's even possible for a single component to be both if needed. -There are examples in the `examples` directory: +[redux](https://github.com/rackt/redux) (`store.routing`)  ↔  [**redux-simple-router**](https://github.com/jlongster/redux-simple-router)  ↔  [history](https://github.com/rackt/history) (`history.location`)  ↔  [react-router](https://github.com/rackt/react-router) -1. [basic](https://github.com/jlongster/redux-simple-router/blob/master/examples/basic) +We only store current URL and state, whereas redux-router stores the entire location object from react-router. You can read it, and also change it with an action. -## How to Use +#### Installation -The idea of this library is to use react-router's functionality exactly -like its documentation tells you to. You can access all of its APIs in -routing components. Additionally, you can use redux like you normally -would, with a single app state and "connected" components. It's even -possible for a single component to be both if needed. +The latest redux-simple-router package can be install via NPM: -This library provides a single point of synchronization: the -`routing.path` piece of state which is the current URL. You can read -it, and also change it with an action. +```js +npm install --save redux-simple-router +``` -Here's some code: +### Tutorial + +Let's take a look at a simple example. ```js import React from 'react' @@ -102,22 +87,17 @@ ReactDOM.render( ) ``` -Now you can read from `state.routing.path` to get the URL. It's far -more likely that you want to change the URL more often, however. You -can use the `updatePath` action creator that we provide: +Now you can read from `state.routing.path` to get the URL. It's far more likely that you want to change the URL more often, however. You can use the `pushPath` action creator that we provide: ```js -import { updatePath } from 'redux-simple-router' +import { pushPath } from 'redux-simple-router' function MyComponent({ dispatch }) { - return