Mantra + Redux and Flow Router


#1

I’m trying to get into mantra and wanted to use it with react, redux and flow router.
But I can’t get redux right this time.

Github: https://github.com/saschb2b/kickstart-mantrajs-meteor-react

I injected context and actions in flow router with
modules/core/routes.jsx
export default function (injectDeps, { FlowRouter }) {
const MainLayoutCtx = injectDeps(MainLayout);

FlowRouter.route('/news', { action() { mount(MainLayoutCtx, { toolbar: <DefaultToolbar title="News" />, content: <NewsOverview />, }); }, });

but when dispatching an action the complete context is used instead of the wanted value.
modules/core/componentsDefaultToolbar.jsx:42
this.props.store.dispatch(this.props.toggleMenu(this.props.menuOpen));
Should call {type: "MENU_TOGGLE", open: false}

Instead it calls
{type: "MENU_TOGGLE", open: Object} where Object is the complete context with Meteor,Tracker, FlowRouter and Store

You can redproduce this by cloning my project, navigate to /news, resize your window to <1014 (which shows the burger button) and click the burger button. The console should now spit a bunch out.

Do I use redux wrong? Is my store not correctly initialised? If you got alternatives or tipps, I take everything :slight_smile:

Edit: Got to change my method in using the action creators. Seems good so far. But my components don’t rerender if something changes in my state. Any idea? Latest change is in the repo


#2

It’s seemed like you’ve already resolved the problem. My congrats! :slight_smile:


#3

Yeah seems to work now. Finally. Hope to get a better understanding over the time


#4

Are you storing the url in the redux store as well? If so, are you able to ‘time travel’ with devtools/redux and flow router where the route changes as well?