Ошибка типа _this.store не определена реагировать на редукцию

Question

В настоящее время я следую этому руководству (https://medium.com/@viewflow/full-stack-django-quick-start-with-jwt-auth-and-react-redux-part-ii-be9cf6942957), которое по сути является руководством по реализации аутентификации JWT с помощью Django REST Framework и React.

Однако после компиляции кода, указанного в репозитории, опубликованномавтор (ы), я получаю конкретную ошибку:

"Ошибка TypeEr: _this.store не определена"

и после обхода в Интернете я не смогнайти ответ на проблему, с которой я сталкиваюсь.

Буду признателен за любую помощь, я могу получить, спасибо!

Answer 1

В этом учебнике используется response-router-redux, который устарел.Что вы можете сделать, это использовать connected-реакции-router вместо этого.Таким образом, ваш src / index.js будет выглядеть как

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')

Ваш магазин теперь будет принимать переменную preloadedState, например

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;
}

Теперь ваш корневой редуктор будет принимать историю в качестве аргумента:

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);
...