未定义typeerror _this.store反应redux

Question

我目前正在关注本教程（https://medium.com/@viewflow/full-stack-django-quick-start-with-jwt-auth-and-react-redux-part-ii-be9cf6942957），该教程实质上是有关使用Django REST Framework和React实现JWT身份验证的指南。

但是，在编译作者发布的存储库中给出的代码时，我遇到了一个特定错误：

“ TypeError：_this.store未定义”

在浏览网络后，我无法找到我所遇到问题的答案。

非常感谢我能提供的任何帮助，谢谢！

Answer 1

本教程使用了不推荐使用的react-router-redux。您可以使用connected-react-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);
...