CODEWITHSUNDEEP
react-redux
Jireh
Jireh

Reputation: 11

typeerror _this.store is not defined react redux

I am currently following this tutorial (https://medium.com/@viewflow/full-stack-django-quick-start-with-jwt-auth-and-react-redux-part-ii-be9cf6942957) which is essentially a guide on implementing JWT authentication with Django REST Framework and React.

However, upon compiling the code given on the repository posted by the author(s), I've been getting a specific error:

"TypeError: _this.store is undefined"

and after trawling through the web, I've not been able to find an answer to the problem I face.

enter image description here

Would appreciate any help I can get, thank you!

Upvotes: 1

Views: 437

Answers (1)

Chris
Chris

Reputation: 43

This tutorial uses react-router-redux which is deprecated. What you could do is use connected-react-router instead. So your src/index.js would look like

import React from 'react';
import ReactDOM from 'react-dom';
import { ConnectedRouter } from 'connected-react-router';
import { Provider } from 'react-redux';

import App from './App';
import configureStore, { history } from './store';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')

Your store would now take a preloadedState variable like

import storage from 'redux-persist/es/storage';
import { createBrowserHistory } from 'history';
import { apiMiddleware } from 'redux-api-middleware';
import { applyMiddleware, compose, createStore } from 'redux';
import { createFilter } from 'redux-persist-transform-filter';
import { persistReducer, persistStore } from 'redux-persist';
import { routerMiddleware } from 'connected-react-router';
import rootReducer from './reducers';

export const history = createBrowserHistory();

export default function configureStore(preloadedState) {
  const persistedFilter = createFilter('auth', ['access', 'refresh']);

  const reducer = persistReducer(
    {
      key: 'polls',
      storage: storage,
      whitelist: ['auth'],
      transforms: [persistedFilter],
    },
    rootReducer(history)
  );

const store = createStore(
    reducer,
    preloadedState,
    compose(applyMiddleware(apiMiddleware, routerMiddleware(history)))
  );

  persistStore(store);

  return store;
}

Now your root reducer will take history as an argument:

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import auth, * as fromAuth from './auth.js';

export default history =>
  combineReducers({
    router: connectRouter(history),
  });

export const isAuthenticated = state => fromAuth.isAuthenticated(state.auth);
...

Upvotes: 1

Related Questions