MrLoh
commented
7 years ago My current workaround is the following code, that simply overrides the path in a custom reduxer. All the redux-first stuff is registered in the state under router.
import createMemoryHistory from 'history/createMemoryHistory';
import { connectRoutes } from 'redux-first-router';
import reduxNavigation from 'redux-first-router-navigation';
import { ShowtimesStack } from '../views/ShowtimesView';
const history = createMemoryHistory({ initialEntries: ['/showtimes/'] });
// connect stack navigators from react-navigation
const navigators = reduxNavigation({ showtimes: ShowtimesStack });
const routesMap = {
'OPEN_SHOWTIMES': { path: '/showtimes/_'},
'OPEN_SETTINGS': { path: '/settings'},
'OPEN_MOVIE_IN_SHOWTIMES': { path: '/showtimes/movie/:id', navKey: 'showtimes' },
'OPEN_SHOWTIMES_HOME': { path: '/showtimes/', navKey: 'showtimes' },
};
const {
reducer: routesMapReducer,
middleware: routerMiddleware,
enhancer: routerEnhancer,
} = connectRoutes(history, routesMap, { location: state => state.router.location, navigators });
const showtimesStackReducer = (state, action) =>
ShowtimesStack.router.getStateForAction(action, state) || state;
const routerReducer = (state = {}, action) => {
const newState = {
...state,
location: routesMapReducer(state.location, action),
showtimes: showtimesStackReducer(state.showtimes, action),
};
if (action.type === 'OPEN_SHOWTIMES') {
const actualPath = state.location.history.entries.reduce(
(curr, { pathname }) => (pathname.split('/')[1] === 'showtimes' ? pathname : curr),
'/showtimes/'
);
newState.location.pathname = actualPath;
newState.location.history.entries[newState.location.history.index].pathname = actualPath;
}
return newState;
};
export { routerReducer, routerMiddleware, routerEnhancer };
export const selectMainRoute = state => state.router.location.pathname.split('/')[1];
faceyspacey
I came across an issue, with setting up react navigation
StackRouters within a custom tab router.I have the following routes:
Both settings and showtimes are separate tabs and inside the showtimes tab there is a movie stack. I controll the tabs myself with a trivial tab router, that get's the active tab with this selector:
state => state.location.pathname.split('/')[1].Now the problem appears when I do the following:
Until 2 everything works fine. But when I go back to the showtimes tab, I want to activate the route
/showtimes/movie/:idwithout adding to the stack. How do I do that easily without needing to know a ton about my navigation state.I found that I can actually simply put a
/showtimes/route inside myroutesMapand then call the corresponding action, which will activate the showtimes tab and even display the top of the stack. But now the path in my location is/showtimes/even though it actually displays/showtimes/movie/1.Shouldn't there be a standard way for redux-first-router to handle this?