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

Comparing version 4.1.0 to 4.2.0

dist/index.d.ts

 import { Action, History, Location } from 'history';
 import React from 'react';
-import { Middleware, Reducer } from 'redux';
+import { AnyAction, Middleware, Reducer } from 'redux';
 export declare type Methods = 'push' | 'replace' | 'go' | 'back' | 'forward';
@@ -24,3 +24,3 @@ /**
 export declare const ROUTER_CALL_HISTORY_METHOD = "@@router/CALL_HISTORY_METHOD";
-export declare type UpdateLocationAction<M extends Methods = Methods> = {
+declare type UpdateLocationAction<M extends Methods> = {
     type: typeof ROUTER_CALL_HISTORY_METHOD;
@@ -74,4 +74,6 @@ payload: {
 };
-export declare type RouterActions = LocationChangeAction | UpdateLocationAction;
+export declare type UpdateLocationActions = ReturnType<typeof push & typeof replace & typeof go & typeof back & typeof forward>;
+export declare type RouterActions = LocationChangeAction | UpdateLocationActions;
 export declare function createRouterMiddleware(history: History): Middleware;
+export declare const ROUTER_REDUCER_MAP_KEY = "router";
 export declare type ReduxRouterState = {
@@ -81,6 +83,9 @@ location: Location;
 };
-export declare function createRouterReducer(history: History): Reducer<ReduxRouterState, RouterActions>;
+export declare function createRouterReducer(history: History): Reducer<ReduxRouterState>;
+export declare function createRouterReducerMapObject(history: History): {
+    router: Reducer<ReduxRouterState, AnyAction>;
+};
 export declare type ReduxRouterSelector<T = any> = (state: T) => ReduxRouterState;
 export declare type ReduxRouterStoreState = {
-    router: ReduxRouterState;
+    [ROUTER_REDUCER_MAP_KEY]: ReduxRouterState;
 };
@@ -91,5 +96,6 @@ export declare function reduxRouterSelector<T extends ReduxRouterStoreState = ReduxRouterStoreState>(state: T): ReduxRouterState;
     basename?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     routerSelector?: ReduxRouterSelector;
 };
 export declare function ReduxRouter({ routerSelector, ...props }: ReduxRouterProps): JSX.Element;
+export {};

dist/index.es.js

@@ -98,13 +98,17 @@ import { jsx } from 'react/jsx-runtime';
     return () => next => (action) => {
-        if (action.type !== ROUTER_CALL_HISTORY_METHOD) {
-            return next(action);
+        if (action.type === ROUTER_CALL_HISTORY_METHOD) {
+            if (action.payload.asEffect === true) {
+                queueMicrotask(() => history[action.payload.method](...action.payload.args));
+            }
+            else {
+                history[action.payload.method](...action.payload.args);
+            }
         }
-        if (action.payload.asEffect) {
-            queueMicrotask(() => history[action.payload.method](...action.payload.args));
-        }
         else {
-            history[action.payload.method](...action.payload.args);
+            return next(action);
         }
     };
 }
+// Reducer
+const ROUTER_REDUCER_MAP_KEY = 'router';
 function createRouterReducer(history) {
@@ -120,10 +124,12 @@ const initialRouterState = {
     return (state = initialRouterState, action) => {
-        if (action.type === ROUTER_ON_LOCATION_CHANGED) {
-            return action.payload;
-        }
-        return state;
+        return action.type === ROUTER_ON_LOCATION_CHANGED ? action.payload : state;
     };
 }
+function createRouterReducerMapObject(history) {
+    return {
+        [ROUTER_REDUCER_MAP_KEY]: createRouterReducer(history),
+    };
+}
 function reduxRouterSelector(state) {
-    return state.router;
+    return state[ROUTER_REDUCER_MAP_KEY];
 }
@@ -136,3 +142,3 @@ function ReduxRouter(_a) {
     useEffect(() => {
-        const listener = props.history.listen((nextState) => {
+        return props.history.listen((nextState) => {
             if (skipHistoryChange.current === true) {
@@ -144,7 +150,8 @@ skipHistoryChange.current = false;
         });
+    }, [props.history, dispatch]);
+    useEffect(() => {
         if (props.history.location !== state.location) {
             dispatch(onLocationChanged(props.history.location, props.history.action));
         }
-        return listener;
-    }, [props.history]);
+    }, []);
     useEffect(() => {
@@ -158,7 +165,7 @@ if (skipHistoryChange.current === undefined) {
         }
-    }, [state]);
+    }, [state.location, props.history]);
     return (jsx(Router, { navigationType: state.action, location: state.location, basename: props.basename, navigator: props.history, children: props.children }));
 }
 
-export { ROUTER_CALL_HISTORY_METHOD, ROUTER_ON_LOCATION_CHANGED, ReduxRouter, back, backStraight, createRouterMiddleware, createRouterReducer, forward, forwardStraight, go, goStraight, onLocationChanged, push, pushStraight, reduxRouterSelector, replace, replaceStraight, routerActions };
+export { ROUTER_CALL_HISTORY_METHOD, ROUTER_ON_LOCATION_CHANGED, ROUTER_REDUCER_MAP_KEY, ReduxRouter, back, backStraight, createRouterMiddleware, createRouterReducer, createRouterReducerMapObject, forward, forwardStraight, go, goStraight, onLocationChanged, push, pushStraight, reduxRouterSelector, replace, replaceStraight, routerActions };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -102,13 +102,17 @@ 'use strict';
     return () => next => (action) => {
-        if (action.type !== ROUTER_CALL_HISTORY_METHOD) {
-            return next(action);
+        if (action.type === ROUTER_CALL_HISTORY_METHOD) {
+            if (action.payload.asEffect === true) {
+                queueMicrotask(() => history[action.payload.method](...action.payload.args));
+            }
+            else {
+                history[action.payload.method](...action.payload.args);
+            }
         }
-        if (action.payload.asEffect) {
-            queueMicrotask(() => history[action.payload.method](...action.payload.args));
-        }
         else {
-            history[action.payload.method](...action.payload.args);
+            return next(action);
         }
     };
 }
+// Reducer
+const ROUTER_REDUCER_MAP_KEY = 'router';
 function createRouterReducer(history) {
@@ -124,10 +128,12 @@ const initialRouterState = {
     return (state = initialRouterState, action) => {
-        if (action.type === ROUTER_ON_LOCATION_CHANGED) {
-            return action.payload;
-        }
-        return state;
+        return action.type === ROUTER_ON_LOCATION_CHANGED ? action.payload : state;
     };
 }
+function createRouterReducerMapObject(history) {
+    return {
+        [ROUTER_REDUCER_MAP_KEY]: createRouterReducer(history),
+    };
+}
 function reduxRouterSelector(state) {
-    return state.router;
+    return state[ROUTER_REDUCER_MAP_KEY];
 }
@@ -140,3 +146,3 @@ function ReduxRouter(_a) {
     react.useEffect(() => {
-        const listener = props.history.listen((nextState) => {
+        return props.history.listen((nextState) => {
             if (skipHistoryChange.current === true) {
@@ -148,7 +154,8 @@ skipHistoryChange.current = false;
         });
+    }, [props.history, dispatch]);
+    react.useEffect(() => {
         if (props.history.location !== state.location) {
             dispatch(onLocationChanged(props.history.location, props.history.action));
         }
-        return listener;
-    }, [props.history]);
+    }, []);
     react.useEffect(() => {
@@ -162,3 +169,3 @@ if (skipHistoryChange.current === undefined) {
         }
-    }, [state]);
+    }, [state.location, props.history]);
     return (jsxRuntime.jsx(reactRouter.Router, { navigationType: state.action, location: state.location, basename: props.basename, navigator: props.history, children: props.children }));
@@ -169,2 +176,3 @@ }
 exports.ROUTER_ON_LOCATION_CHANGED = ROUTER_ON_LOCATION_CHANGED;
+exports.ROUTER_REDUCER_MAP_KEY = ROUTER_REDUCER_MAP_KEY;
 exports.ReduxRouter = ReduxRouter;
@@ -175,2 +183,3 @@ exports.back = back;
 exports.createRouterReducer = createRouterReducer;
+exports.createRouterReducerMapObject = createRouterReducerMapObject;
 exports.forward = forward;
@@ -177,0 +186,0 @@ exports.forwardStraight = forwardStraight;

package.json

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

README.md

@@ -43,7 +43,52 @@ ![License](https://img.shields.io/github/license/lagunovsky/redux-react-router)
 
-See the [examples](https://github.com/lagunovsky/redux-react-router/tree/master/examples) folder
+```typescript jsx
+import { configureStore } from '@lagunovsky/redux-react-router'
+import { configureStore } from '@reduxjs/toolkit'
+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'
 
-Note: the `history` object provided to `router` reducer, `routerMiddleware`, and `ReduxRouter` component must be the same `history` object.
+const history = createBrowserHistory()
+const routerMiddleware = createRouterMiddleware(history)
 
+const store = configureStore({
+  reducer: createRouterReducerMapObject(history),
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(routerMiddleware),
+})
 
+function Content() {
+  const dispatch = useDispatch()
+  
+  const onClickHandler = () => {
+    const action = push(Date.now().toString())
+    dispatch(action)
+  }
+  
+  return (
+    <>
+      <NavLink to={'/'} children={'Home'}/>
+      <button type={'button'} onClick={onClickHandler} children={'Rand'}/>
+    </>
+  )
+}
+
+function App() {
+  return (
+    <Provider store={store}>
+      <ReduxRouter history={history}>
+        <Routes>
+          <Route path={'*'} element={<Content/>}/>
+        </Routes>
+      </ReduxRouter>
+    </Provider>
+  )
+}
+```
+
+Note: the `history` object provided to reducer, middleware, and component must be the same `history` object.
+
+
 Migrate from Connected React Router
@@ -50,0 +95,0 @@ ----

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

30887

increased by8.65%

Lines of code

611

increased by4.8%

Number of lines in readme file

123

increased by57.69%

No dependency changes