3

I am new to react, I would like to use react hooks with redux (with redux-react-hook) with routing (I use connected-react-router but I can switch to another lib)

I pass the store to the StoreContext Provider, everything is okay, but when I add the ConnectedRouter with the right context I get errors.

Here is what I am trying

//index.js
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';
import { StoreContext, store, history } from './store';

ReactDOM.render((
    <StoreContext.Provider value={store}>
        <ConnectedRouter history={history} context={StoreContext}>
            <Switch>
                <Route path="/" component={App}></Route>
            </Switch>
        </ConnectedRouter>
    </StoreContext.Provider>
), document.getElementById('root'));

//store.js
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import { applyMiddleware, createStore } from 'redux';
import { create } from 'redux-react-hook';
import { routerMiddleware } from 'connected-react-router';
import { createBrowserHistory } from 'history';
import {promiseMiddleware } from './middlewares'
import createRootReducer from './reducer'

export const { StoreContext, useDispatch, useMappedState } = create();
export const history = createBrowserHistory();
export const store = createStore(
    createRootReducer(history),
    {}, //preloadedState
    composeWithDevTools(applyMiddleware(
        routerMiddleware(history),
        promiseMiddleware
    ))
);

But i receive this error :

TypeError: sourceSelector is not a function
Connect.selectDerivedProps
C:/Users/NG7F61C/Documents/PROJECTS/1 - IJET/Sources/frontend/node_modules/react-redux/es/components/connectAdvanced.js:112
  109 | 
  110 |   lastProps = props;
  111 |   lastState = state;
> 112 |   var nextProps = sourceSelector(state, props);
      | ^  113 |   lastDerivedProps = nextProps;
  114 |   return lastDerivedProps;
  115 | };

Am I doing something wrong or ConnectedRouter is not compatible with redux-react-hook ?

Gatoyu
  • 642
  • 1
  • 6
  • 22
  • Do you have this sorted now? I started out using react-redux the old way with HOC. Now, I want to try out react-redux the hooks way and need pointers. – Eniola Dec 27 '19 at 23:29
  • @Eniola I completly gave up on using redux. I found it became totally useless with hooks – Gatoyu Jan 03 '20 at 13:02

0 Answers0