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
{{ message }}
This repository was archived by the owner on Oct 26, 2018. It is now read-only.
[react-router](https://github.com/rackt/react-router) is neat. The
11
-
problem is that react-router manages an important piece
12
-
of your application state: the URL. If you are using redux, you want
13
-
your app state to fully represent your UI; if you snapshotted the app
14
-
state, you should be able to load it up later and see the same thing.
7
+
[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.
15
8
16
-
react-router automatically maps the current URL to a path down your
17
-
component tree, and continually does so with any URL changes. This is
18
-
very useful, but we really want to store this state in redux as well.
9
+
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.
19
10
20
-
The entire state that we are interested in boils down to one thing:
21
-
the URL. This is an extremely simple library that just puts the URL in
22
-
redux state and keeps it in sync with any react-router changes.
23
-
Additionally, you can change the URL via redux and react-router will
24
-
change accordingly.
11
+
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.
25
12
26
-
```js
27
-
npm install redux-simple-router
28
-
```
13
+
##### _What about redux-router?_
14
+
15
+
[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.
29
16
30
-
## Isn't there already redux-router?
17
+
That said, redux-router is a fine project and has features this doesn't provide. Use it if you like it better.
31
18
32
-
[redux-router](https://github.com/rackt/redux-router) is another
33
-
project which solves the same problem. However, it's far more complex.
34
-
Just look at this code: the whole thing is only 68 lines of JS.
35
-
redux-router is much bigger and more complex.
19
+
**Compared with redux-router:**
36
20
37
-
That said, redux-router is a fine project and has features this
38
-
doesn't provide. Use it if you like it better.
21
+
* Much smaller and simpler. You don't need to learn another library on top of everything else.
22
+
* We encourage direct access of react-router APIs. Need server-side rendering, or something else advanced? Just read react-router's docs.
23
+
* We only store current URL and state, whereas redux-router stores the entire location object from react-router.
39
24
40
-
The differences between this and redux-router:
25
+
## Documentation
41
26
42
-
* Much smaller and simpler. You don't need to learn another library on
43
-
top of everything else.
44
-
* We encourage direct access of react-router APIs. Need server-side
45
-
rendering, or something else advanced? Just read react-router's
46
-
docs.
47
-
* The piece of state is just a URL string, whereas redux-router stores
This only depends on the `history.listen` function from react-router
51
-
and the `store.getState` and `store.subscribe` functions from redux.
52
-
It should be very future-proof with any versions of either libraries.
39
+
### Usage
53
40
54
-
## Examples
41
+
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.
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.
59
46
60
-
##How to Use
47
+
#### Installation
61
48
62
-
The idea of this library is to use react-router's functionality exactly
63
-
like its documentation tells you to. You can access all of its APIs in
64
-
routing components. Additionally, you can use redux like you normally
65
-
would, with a single app state and "connected" components. It's even
66
-
possible for a single component to be both if needed.
49
+
The latest redux-simple-router package can be install via NPM:
67
50
68
-
This library provides a single point of synchronization: the
69
-
`routing.path` piece of state which is the current URL. You can read
70
-
it, and also change it with an action.
51
+
```js
52
+
npm install --save redux-simple-router
53
+
```
71
54
72
-
Here's some code:
55
+
### Tutorial
56
+
57
+
Let's take a look at a simple example.
73
58
74
59
```js
75
60
importReactfrom'react'
@@ -102,22 +87,17 @@ ReactDOM.render(
102
87
)
103
88
```
104
89
105
-
Now you can read from `state.routing.path` to get the URL. It's far
106
-
more likely that you want to change the URL more often, however. You
107
-
can use the `updatePath` action creator that we provide:
90
+
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:
This will change the state, which will trigger a change in react-router.
118
-
119
-
Additionally, if you want to respond to the path update action, just
120
-
handle the `UPDATE_PATH` constant that we provide:
100
+
This will change the state, which will trigger a change in react-router. Additionally, if you want to respond to the path update action, just handle the `UPDATE_PATH` constant that we provide:
121
101
122
102
```js
123
103
import { UPDATE_PATH } from'redux-simple-router'
@@ -130,39 +110,44 @@ function update(state, action) {
130
110
}
131
111
```
132
112
133
-
For more context, check out this [full example](https://github.com/freeqaz/redux-simple-router-example).
*[davezuko/react-redux-starter-kit](https://github.com/davezuko/react-redux-starter-kit) - popular redux starter kit
120
+
***tip**: migrating from redux-router? use [this commit](https://github.com/davezuko/react-redux-starter-kit/commit/db66626ca8a02ecf030a3f7f5a669ac338fd5897) as a reference
121
+
*[freeqaz/redux-simple-router-example](https://github.com/freeqaz/redux-simple-router-example) - example implementation
Call this with a react-router and a redux store instance to install hooks that always keep both of them in sync. When one changes, so will the other.
130
+
131
+
Supply an optional function `selectRouterState` to customize where to find the router state on your app state. It defaults to `state => state.routing`, so you would install the reducer under the name "routing". Feel free to change this to whatever you like.
A reducer function that keeps track of the router state. You must to add this reducer to your app reducers when creating the store. If you do not provide a custom `selectRouterState` function, the piece of state must be named `routing`.
138
136
139
-
Call this with a react-router and a redux store instance to install
140
-
hooks that always keep both of them in sync. When one changes, so will
141
-
the other.
137
+
#### `UPDATE_PATH`
142
138
143
-
Supply an optional function `selectRouterState` to customize where to
144
-
find the router state on your app state. It defaults to `state =>
145
-
state.routing`, so you would install the reducer under the name
146
-
"routing". Feel free to change this to whatever you like.
139
+
An action type that you can listen for in your reducers to be notified of route updates.
A reducer function that keeps track of the router state. You need to
151
-
add this reducer to your app reducers when creating the store. **The
152
-
piece of state must be named `routing`** (unless you provide a custom
153
-
`selectRouterState` function).
143
+
An action creator that you can use to update the current URL and update the browser history. Just pass it a string like `/foo/bar?param=5` as the `path` argument.
154
144
155
-
### `UPDATE_PATH`
145
+
You can optionally pass a state to this action creator to update the state of the current route.
156
146
157
-
An action type that you can listen for in your reducers.
147
+
The `avoidRouterUpdate`, if `true`, will stop react-router from reacting to this URL change. This is useful if replaying snapshots while using the `forceRefresh` option of the browser history which forces full reloads. It's a rare edge case.
0 commit comments