ilonacodes
Patreon
Investor Profile
Contact

Financial tips and advice on investment for developers:
"Learn how to free extra monthly cash from your dev-salary for investment"

There are so many different ways to free money for investments without thinking of getting another job. Download my Top-15 cash-freeing tips cheat sheet.

Get my 15 Tips to Invest More Cash Monthly!
14
Mar
2018
#react
#redux
#react-router-redux
#javascript
#frontend
#learntocode
#coding
#letsgetcoding
#womenwhocode

Front-end Shorts: Setting up React-Router-Redux

14 Mar, 2018

Hi, everyone! How is your week going?

Yesterday I worked with the web application written on React + Redux and had had some problem with the react-router-redux library. In short, the push method (using for navigation outside of components) didn’t work.

Firstly, I have tried to set the Route component in the “traditional” way such as with react-router library. That might get the history props. Unfortunately, that also didn’t work. Because of Redux framework.

After spending time on the Internet, I found the issue how to navigate events via Redux actions: I missed routerMiddleware as the second parameter for my store:

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {applyMiddleware, combineReducers, compose, createStore} from 'redux';
import {browserHistory} from 'react-router';
import {routerMiddleware, routerReducer, syncHistoryWithStore} from 'react-router-redux';

import {Routes} from './components/Routes';
import {expenseFormReducer, expensesReducer} from './reducers/expensesReducer';

import './index.css';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

let store = createStore(
    combineReducers({
        routing: routerReducer,
        expenses: expensesReducer,
        expenseForm: expenseFormReducer
    }),
    composeEnhancers(
        applyMiddleware(
            routerMiddleware(browserHistory)
        )
    ),
);

const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(<Routes history={history} store={store}/>,
    document.getElementById('root')
);

After applying that all routes to different component work correctly.

Thank you for the reading. If you have any questions or suggestions how it should have written on, then just get in touch with me either on my Twitter or Instagram profiles.

Tags | #react #redux #react-router-redux #javascript #frontend #learntocode #coding #letsgetcoding #womenwhocode
Next: Front-end Shorts: How to Create Parallax Effect With Vanilla JS

My name is Ilona, and I'm a software engineer, founder, and blogger who is (besides programming) also passionate about startups, finance and investment

"I like to work hard for things that are worth it."
The latest articles:
Numbrs Review - App For Personal Finances (Germany & UK only)
How Developers Can Get Symbols From Stock Indexes With Python
Bitcoin Profit Calculator For Developers

Imprint
Privacy Policy
© 2021 ilonacodes
© 2021 ilonacodes
Imprint
Privacy Policy