@lagunovsky/redux-react-router - npm Package Compare versions

Comparing version 4.2.1 to 4.2.2

CHANGELOG.md

 # Changelog
 
+## [4.2.2](https://github.com/lagunovsky/redux-react-router/compare/v4.2.0...v4.2.2)
+
+* readme update
+
 ## [4.2.0](https://github.com/lagunovsky/redux-react-router/compare/v4.1.0...v4.2.0)
@@ -4,0 +8,0 @@

package.json

 {
   "name": "@lagunovsky/redux-react-router",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "description": "A Redux binding for React Router v6",
@@ -5,0 +5,0 @@ "author": "Ivan Lagunovsky",

README.md

@@ -13,6 +13,7 @@ ![License](https://img.shields.io/github/license/lagunovsky/redux-react-router)
 - [Usage](#usage)
-- **[Migrate from Connected React Router](#migrate-from-connected-react-router)**
+- - [Examples](#examples)
+- - [API](#api)
+- [Migrate from Connected React Router](#migrate-from-connected-react-router)
 
-Main features
------
+## Main features
 
@@ -23,3 +24,3 @@ - Synchronize router state with redux store through uni-directional flow (i.e. history -> store -> router -> components).
 - Dispatching of history methods (`push`, `replace`, `go`, `back`, `forward`) works for both [redux-thunk](https://github.com/gaearon/redux-thunk)
-and [redux-saga](https://github.com/yelouafi/redux-saga).
+  and [redux-saga](https://github.com/yelouafi/redux-saga).
 - Nested children can access routing state such as the current location directly with `react-redux`'s `connect`.
@@ -29,18 +30,22 @@ - Supports time traveling in Redux DevTools.
 
+## Installation
 
-Installation
------
-
 Redux React Router requires **React 16.8, React Redux 6.0, React Router 6.0 or later**.
 
-    $ npm install --save @lagunovsky/redux-react-router
+```shell
+npm install --save @lagunovsky/redux-react-router
+```
 
-Or
+```shell
+yarn add @lagunovsky/redux-react-router
+```
 
-    $ yarn add @lagunovsky/redux-react-router
+## Usage
 
+### Examples
 
-Usage
------
+Note: the `history` object provided to reducer, middleware, and component must be the same `history` object.
 
+#### `@reduxjs/toolkit`
+
 ```typescript jsx
@@ -66,3 +71,3 @@ import { createRouterMiddleware, createRouterReducerMapObject, push, ReduxRouter } from '@lagunovsky/redux-react-router'
   const dispatch = useDispatch()
-  
+
   const onClickHandler = () => {
@@ -72,3 +77,3 @@ const action = push(Date.now().toString())
   }
-  
+
   return (
@@ -95,7 +100,104 @@ <>
 
-Note: the `history` object provided to reducer, middleware, and component must be the same `history` object.
+#### `redux.createStore` and custom selector
 
+```typescript jsx
+import { createRouterMiddleware, createRouterReducer, push, ReduxRouter, ReduxRouterSelector } from '@lagunovsky/redux-react-router'
+import { createBrowserHistory } from 'history'
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { Provider, useDispatch } from 'react-redux'
+import { Route, Routes } from 'react-router'
+import { NavLink } from 'react-router-dom'
+import { applyMiddleware, combineReducers, compose, createStore } from 'redux'
 
-Migrate from Connected React Router
-----
+const history = createBrowserHistory()
+const routerMiddleware = createRouterMiddleware(history)
+
+const rootReducer = combineReducers({ navigator: createRouterReducer(history) })
+
+const store = createStore(rootReducer, compose(applyMiddleware(routerMiddleware)))
+type State = ReturnType<typeof store.getState>
+
+const routerSelector: ReduxRouterSelector<State> = (state) => state.navigator
+
+function App() {
+  return (
+    <Provider store={store}>
+      <ReduxRouter history={history} routerSelector={routerSelector}>
+        <Routes>
+          <Route path={'*'} element={<div/>}/>
+        </Routes>
+      </ReduxRouter>
+    </Provider>
+  )
+}
+```
+
+### API
+
+#### Types
+
+```typescript jsx
+type ReduxRouterProps = {
+  history: History
+  basename?: string
+  children?: React.ReactNode
+  routerSelector?: ReduxRouterSelector 
+}
+```
+
+```typescript jsx
+type ReduxRouterState = {
+  location: history.Location
+  action: history.Action
+}
+```
+
+#### Constants
+
+```typescript jsx
+const ROUTER_REDUCER_MAP_KEY = 'router'
+const ROUTER_CALL_HISTORY_METHOD = '@@router/CALL_HISTORY_METHOD'
+const ROUTER_ON_LOCATION_CHANGED = '@@router/ON_LOCATION_CHANGED'
+```
+
+#### `createRouterMiddleware(history: History) => Middleware`
+
+A middleware you can apply to your Redux store to capture dispatched actions created by the action creators. 
+It will redirect those actions to the provided history instance.
+
+#### `createRouterReducerMapObject(history: History) => {router: Reducer<ReduxRouterState>}`
+
+Creates a reducer map object that stores location updates from history.
+
+#### `createRouterReducer(history: History) => Reducer<ReduxRouterState>`
+
+Creates a reducer function that stores location updates from history.
+Note: If you create a reducer with a key other than `ROUTER_REDUCER_MAP_KEY`, 
+you must add a selector `(state: State) => ReduxRouterState` to your `<ReduxRouter/>` as `routerSelector` prop.
+
+#### `reduxRouterSelector(state: State): ReduxRouterState`
+
+Selector that returns location updates from history.
+
+### Action creators
+
+Same as [history methods](https://github.com/remix-run/history/blob/dev/docs/navigation.md)
+
+- `push`
+- `replace`
+- `go` 
+- `back`
+- `forward`
+
+By default, history methods calls in middleware are wrapped in a `queueMicrotask`. If you want to avoid it, please use the following methods:
+
+- `pushStraight` 
+- `replaceStraight` 
+- `goStraight` 
+- `backStraight` 
+- `forwardStraight`
+
+## Migrate from Connected React Router
+
 ```diff
@@ -102,0 +204,0 @@ - import { connectRouter } from 'connected-react-router'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34380

increased by9.95%

Number of lines in readme file

225

increased by82.93%

No dependency changes