redux-first-history - npm Package Compare versions

Comparing version 5.0.3 to 5.0.4

build/es5/actions.d.ts

@@ -1,2 +0,2 @@
-import { Location, Action, History } from 'history';
+import { Location, Action } from 'history';
 import { AnyAction as ReduxAction } from 'redux';
@@ -13,8 +13,8 @@ export declare const CALL_HISTORY_METHOD = "@@router/CALL_HISTORY_METHOD";
 };
-export declare const push: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const replace: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const go: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const goBack: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const goForward: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const back: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const forward: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
+export declare const push: (location: import("history").LocationDescriptor<unknown>) => ReduxAction;
+export declare const replace: (location: import("history").LocationDescriptor<unknown>) => ReduxAction;
+export declare const go: (n: number) => ReduxAction;
+export declare const goBack: () => ReduxAction;
+export declare const goForward: () => ReduxAction;
+export declare const back: (...args: never) => ReduxAction;
+export declare const forward: (...args: never) => ReduxAction;

build/es6/actions.d.ts

@@ -1,2 +0,2 @@
-import { Location, Action, History } from 'history';
+import { Location, Action } from 'history';
 import { AnyAction as ReduxAction } from 'redux';
@@ -13,8 +13,8 @@ export declare const CALL_HISTORY_METHOD = "@@router/CALL_HISTORY_METHOD";
 };
-export declare const push: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const replace: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const go: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const goBack: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const goForward: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const back: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
-export declare const forward: (...args: Parameters<History[HistoryMethods]>) => ReduxAction;
+export declare const push: (location: import("history").LocationDescriptor<unknown>) => ReduxAction;
+export declare const replace: (location: import("history").LocationDescriptor<unknown>) => ReduxAction;
+export declare const go: (n: number) => ReduxAction;
+export declare const goBack: () => ReduxAction;
+export declare const goForward: () => ReduxAction;
+export declare const back: (...args: never) => ReduxAction;
+export declare const forward: (...args: never) => ReduxAction;

package.json

 {
    "name": "redux-first-history",
-   "version": "5.0.3",
+   "version": "5.0.4",
    "description": "Redux First History - Redux history binding support react-router - @reach/router - wouter",
@@ -5,0 +5,0 @@ "main": "build/es5/index.js",

README.md

@@ -13,3 +13,3 @@ # redux-first-history
 * [`wouter`](https://github.com/molefrog/wouter)
-* mix `react-router` - `@reach/router` - `wouter` in the same app!! Demo : https://wy5qw1125l.codesandbox.io/.
+* Mix `react-router` - `@reach/router` - `wouter` in the same app! See [Demo](#demo).
 
@@ -21,3 +21,28 @@ Compatible with `immer` - `redux-immer` - `redux-immutable`.
 
+## Table of Contents
+
+- [Main Goal](#main-goal)
+  - [Demo](#demo)
+- [Main Features](#main-features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Options](#options)
+- [Advanced Config](#advanced-config)
+- [Feedback](#feedback)
+- [Credits & Inspiration](#credits--inspiration)
+- [Contributors](#contributors)
+- [License](#license)
+
+
 ## Main Goal
+While working with *relatively large* projects, it's quite common to use both `redux` and `react-router`.
+
+So you may have components that take location from the redux store, others that take location from router context, and others from withRouter HOC.
+
+This can generate sync issues, due to the fact that many components are updated at different times.
+In addition, React shallowCompare rendering optimization will not work as it should.
+
+With `redux-first-history`, you can mix components that get history from wherever, 
+they will always be tunneled to *state.router.location* !
+
 *Use whatever you like. History will just work as it should.*
@@ -45,8 +70,8 @@
 
-You can mix redux, redux-saga, react-router, @reach/router & wouter
+Mix redux, redux-saga, react-router, @reach/router & wouter
 without any synchronization issue! <br>
 Why? Because there is no synchronization at all! There is only one history: reduxHistory!
-* one way data-flow
-* one unique source of truth
-* no more location issue!
+* One way data-flow
+* One unique source of truth
+* No more location issues!
 
@@ -57,22 +82,26 @@ <p align="center">
 
-Demo : https://wy5qw1125l.codesandbox.io/ src: https://codesandbox.io/s/wy5qw1125l
+## Demo
 
-Demo v6 : https://codesandbox.io/s/redux-first-history-demo-rr6-uccuw
+- react-router v5: https://wy5qw1125l.codesandbox.io/ 
+  - Source: https://codesandbox.io/s/wy5qw1125l
 
-# Main features
+- react-router v6: https://uccuw.csb.app/
+  - Source: https://codesandbox.io/s/redux-first-history-demo-rr6-uccuw
+
+# Main Features
  
 * 100% one source of truth (store)
-* No syncronization depending on rendering lifecicle (ConnectedRouter)
+* No synchronization depending on rendering lifecycle (ConnectedRouter)
 * No React dependency (we want history to be always in store!)
 * 100% one-way data flow (only dispatch actions!)
-* improve React shallowCompare as there is only one "location"
-* support react-router v4 / v5 / v6
-* support @reach/router 1.x
-* support wouter 2.x
-* support mix react-router, @reach/router & wouter in the same app!
-* fast migration from existing project, with same `LOCATION_CHANGE` and push actions (taken from RRR)
-* handle Redux Travelling from devTools (that's a non sense in production, but at the end of the day this decision it's up to you ...) 
+* Improve React shallowCompare as there is only one "location"
+* Support react-router v4 / v5 / v6
+* Support @reach/router 1.x
+* Support wouter 2.x
+* Support mix react-router, @reach/router & wouter in the same app!
+* Fast migration from an existing project, with the same `LOCATION_CHANGE` and push actions (taken from RRR)
+* Handle Redux Travelling from dev tools (that's nonsense in production, but at the end of the day this decision it's up to you ...)
 
-Installation
------------
+
+## Installation
 Using [npm](https://www.npmjs.com/):
@@ -85,5 +114,5 @@
     $ yarn add redux-first-history
-Usage
------
 
+## Usage
+
 store.js
@@ -124,3 +153,3 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { createReduxHistoryContext, reachify } from "redux-first-history";
+import { createReduxHistoryContext } from "redux-first-history";
 import { createBrowserHistory } from "history";
@@ -165,3 +194,3 @@
 import React, { Component } from "react";
-import { Provider, connect } from "react-redux";
+import { Provider } from "react-redux";
 import { HistoryRouter as Router } from "redux-first-history/rr6";
@@ -181,18 +210,31 @@ import { store, history } from "./store";
 
-* just simple Router with no more ConnectedRouter!
-* use `push` action creator from `redux-first-history` if you need to dispatch location from `saga` or connected components.
-* Probably, you already did it with `react-router-redux` or `connected-react-router` (in this case you have only to replace the import!) 
 
-# Abstract
+saga.js (react-saga)
+```javascript
+import { put } from "redux-saga/effects";
+import { push } from "redux-first-history";
 
-While working with *relatively large* projects, it's quite common to use both `redux` and `react-router`.
+function* randomFunction() {
+  //....
+  yield put(push(YOUR_ROUTE_PATH));
+  //....
+}
+```
 
-So you may have components that take location from store, others that take location from router context, and others from withRouter HOC.
+slice.js (in a Thunk with @reduxjs/toolkit)
+```javascript
+import { push } from "redux-first-history";
 
-This sometimes could generate sync issue, due to the fact that many components are updated at different time.
-In addition, React shallowCompare rendering optimization will not work as it should.
+export const RandomThunk = (dispatch) => {
+  //....
+  dispatch(push(YOUR_ROUTE_PATH));
+  //....
+}
+```
 
-With `redux-first-history`, you can mix components that get history from wherever, 
-they will always be tunneled to *state.router.location* !
 
+* Just a simple Router with no more ConnectedRouter!
+* Probably, you already did connect the Redux store with `react-router-redux` or `connected-react-router` (in this case you have only to replace the import!)
+
+
 # Options
@@ -222,5 +264,5 @@
 
-# Advanced config
+# Advanced Config
 
-* support "navigate" from @reach/router
+* Support "navigate" from @reach/router
 ```javascript
@@ -238,3 +280,3 @@ import { createReduxHistoryContext, reachify } from "redux-first-history";
 
-* React batch updates: top-down batch updates for maximum performance. Fix also some update edge cases.
+* React batch updates: top-down batch updates for maximum performance. Fix also some updated edge cases.
 ```javascript
@@ -256,3 +298,3 @@ import { createReduxHistoryContext, reachify } from "redux-first-history";
 
-# credits & inspiration
+# Credits & Inspiration
  - redux-first-routing
@@ -262,8 +304,6 @@ - react-router-redux
 
-Contributors
-------------
+# Contributors
 See [Contributors](https://github.com/salvoravida/redux-first-history/graphs/contributors).
 
-License
--------
+# License
 [MIT License](https://github.com/salvoravida/redux-first-history/blob/master/LICENSE.md).

src/actions.ts

@@ -22,5 +22,5 @@ import { Location, Action, History } from 'history';
 
-function updateLocation(method: HistoryMethods) {
+function updateLocation<T extends HistoryMethods>(method: T) {
    // @ts-ignore
-   return (...args: Parameters<History[HistoryMethods]>): ReduxAction => ({
+   return (...args: Parameters<History[T]>): ReduxAction => ({
       type: CALL_HISTORY_METHOD,
@@ -27,0 +27,0 @@ payload: { method, args },

No alert changes

Improved metrics

Total package byte prevSize

83834

increased by0.37%

Number of lines in readme file

298

increased by15.5%

No dependency changes