Roadmap 5.x

[salvoravida]

Roadmap 5.x

This issue is a roadmap for all work on the 5.x branch.

• Rewrite all with TS
• Support history v5.x
• Support react-router v6.x
• Deprecate/remove oldLocationChangePayload
• Test coverage 100%
• Better docs

if you have any ideas... now's the time!
Let's discuss.

[salvoravida]

started branch dev-5x

• removed support for @reach/router -> converged to react-router v6

[sirrodgepodge]

why remove @reach/router support? Your library of course, but support for that is what brought me to this library (reach router is the required router for Gatsby since that's what it uses)

[salvoravida]

@sirrodgepodge @reach/router is deprecated, the project will converge to react-router v6

https://reacttraining.com/blog/reach-react-router-future/

[salvoravida]

But maybe it could be useful to support react-routef v6 and @reach/router at the same time...

[llaenowyd]

Is react-router v6 coming soon? What's the best choice for a router lib that's available today?

[salvoravida]

Is react-router v6 coming soon? What's the best choice for a router lib that's available today?

yes we are waiting for out of beta v6 and for this pr merged
remix-run/react-router#7586

[salvoravida]

rewritten in ts!

[salvoravida]

removed - [x] Deprecate/remove @reach/router ? (it will converge to react-router v6)

5.x will support react-router v4/v5/v6 - reach/router v1.x - history v4/v5

[salvoravida]

https://github.com/salvoravida/redux-first-history/releases/tag/v5.0.0-beta.2

• rewritten in TS
• add support for react-router v6.0.0-beta.1

import { HistoryRouter as Router } from "redux-first-history/rr6";
import { Route, Routes, Navigate } from "react-router-dom";
//...
import { store, history } from "./store";
//...

     <Router history={history}>
                 <Routes>
                   <Route path="/dashboard" element={<Dashboard />} />
                   <Route path="/" element={<Home />} />
                   <Route path="*" element={<Navigate to="/" />} />
                 </Routes>
     </Router>

demo rr6 here: https://codesandbox.io/s/redux-first-history-demo-rr6-uccuw

[mtmacdonald]

Would be nice if the docs could show a configuration example with Redux Toolkit (configureStore)

[salvoravida]

Would be nice if the docs could show a configuration example with Redux Toolkit (configureStore)

https://codesandbox.io/s/redux-first-history-demo-forked-fy1kt?file=/src/store.js

It's quite easy:

import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import { createReduxHistoryContext, reachify } from "redux-first-history";
import { createWouterHook } from "redux-first-history/wouter";
import { createBrowserHistory } from "history";
import createSagaMiddleware from "redux-saga";
import mySaga from "./sagas";

const sagaMiddleware = createSagaMiddleware();

const {
  createReduxHistory,
  routerMiddleware,
  routerReducer
} = createReduxHistoryContext({ history: createBrowserHistory() });

export const store = configureStore({
  reducer: combineReducers({
    router: routerReducer
  }),
  middleware: [sagaMiddleware, routerMiddleware]
});

sagaMiddleware.run(mySaga);

export const history = createReduxHistory(store);
export const reachHistory = reachify(history);
export const wouterUseLocation = createWouterHook(history);

[mtmacdonald]

Another question: what's the best flow for accessing router "match params" in the Redux layer?

If this package makes the store the "single source of truth" for all state (including routing state), then I would like some kind of selector which retrieves url params for direct use in the Redux layer (without having to fetch them first in React components via useParams()). For example, if my path is project/1, I want access to the project id as a store property.

My use-case is that I want to dispatch navigation actions, without the boilerplate of the React component having to look up and forward params that the store could already be aware of.

Some guidance or docs on this would be great!

[AnimaLupi]

Hello, not sure if I should open another issue or just add this here as it's related to 5.x development... hope it's the right place :-)

Anyway, React Router v6 is out and they merrily removed the history prop from <Router> (also from <BrowserRouter> and friends).
Does that rule out any possibility of integration with redux-first-history unless they re-add it? :-(

[salvoravida]

https://github.com/salvoravida/redux-first-history/releases

5.0 beta 2 already supports rr6 also the last one.

I think it's time to release rfh 5.0 final as the beta is quite stable.

Please give me a feedback if you test with rr6

[salvoravida]

Hello, not sure if I should open another issue or just add this here as it's related to 5.x development... hope it's the right place :-)

Anyway, React Router v6 is out and they merrily removed the history prop from <Router> (also from <BrowserRouter> and friends). Does that rule out any possibility of integration with redux-first-history unless they re-add it? :-(

import { HistoryRouter as Router } from "redux-first-history/rr6";
import { Route, Routes, Navigate } from "react-router-dom";
//...
import { store, history } from "./store";
//...

     <Router history={history}>
                 <Routes>
                   <Route path="/dashboard" element={<Dashboard />} />
                   <Route path="/" element={<Home />} />
                   <Route path="*" element={<Navigate to="/" />} />
                 </Routes>
     </Router>

demo rr6 here: https://codesandbox.io/s/redux-first-history-demo-rr6-uccuw

[AnimaLupi]

Thank you very much!
I was missing the new

import { HistoryRouter as Router } from "redux-first-history/rr6";

With that one, things are working properly. Thanks again, looking forward for the 5.0 release! 👍

[salvoravida]

v5.0.0 is out!
https://github.com/salvoravida/redux-first-history/releases/tag/v5.0.0

let me know your feedback!

[salvoravida]

added @reduxjs/toolkit and react-router v6 examples on the homepage!

[salvoravida]

https://github.com/remix-run/react-router/releases/tag/v6.1.0

Finally, react-router published HistoryRouter! 🎉

[awreese]

Came here after searching what oldLocationChangePayload represented and what it was supposed to be used for. It appears to be deprecated but is still included in the type interface:

redux-first-history/src/create.ts

Line 20 in 328cf16

oldLocationChangePayload?: boolean;

[salvoravida]

Came here after searching what oldLocationChangePayload represented and what it was supposed to be used for. It appears to be deprecated but is still included in the type interface:

redux-first-history/src/create.ts

Line 20 in 328cf16

oldLocationChangePayload?: boolean;

https://github.com/salvoravida/redux-first-history/releases/tag/v5.0.12