无法将 redux-devtools-extension 与 react-router-redux syncHistoryWithStore 一起使用

Posted 2023-03-05

【中文标题】无法将 redux-devtools-extension 与 react-router-redux syncHistoryWithStore 一起使用

【英文标题】：unable to use redux-devtools-extension with react-router-redux syncHistoryWithStore

【发布时间】：2016-09-27 13:09:13

【问题描述】：

我无法将 redux-devtools-extension 与 react-router-redux 的 syncHistoryWithStore 一起使用。我得到的错误是 Uncaught TypeError: store.getState is not a function。

syncHistoryWithStore @sync.js:38 （匿名函数）@store.js:30

我的商店.js

import  createStore, applyMiddleware, compose  from 'redux';
import  syncHistoryWithStore  from 'react-router-redux';
import  browserHistory  from 'react-router';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from './reducers/reducers';
import devTools from 'remote-redux-devtools';

const loggerMiddleware = createLogger()

import data from './dummydata/data'

// dummy data is an export of an array of objects
// 
// 
//  const data = [
//     
//        "Id":"BAcyDyQwcXX",
//        "labels": ['P1', 'P2', 'P3', 'P4', 'P5/P6'],
//        "series": [[1, 2, 3, 4, 5]],
//        "total": 0
//     
// ]
// 

const initialState = 
  data
;

//const store = createStore(rootReducer, initialState)
//it works when i use this, but when try to implement the devTools extension, 
//the error fires.

const store = function configureStore(initialState) 
  const storeCreator = createStore(rootReducer, initialState,
    window.devToolsExtension && window.devToolsExtension()
  );
  return storeCreator;


export const history = syncHistoryWithStore(browserHistory, store)

export default store;

我的 rootReducer.js

import  combineReducers  from 'redux'
import  routerReducer  from 'react-router-redux';

function post(state = [], action) 
  console.log("state: ", state, "action: ", action);
  return state


const rootReducer = combineReducers(
  post, routing: routerReducer
)

export default rootReducer

我的 main.js

import React from 'react';
import  render  from 'react-dom';
import  Provider  from 'react-redux';

import css from  './styles/stylesheets/style.css';

import store,  history  from './store';

import Main from './components/Main';
import Index from './components/Index';
import Single from './components/Single';
import GraphChart from './components/GraphChart';

import  Router, Route, IndexRoute  from 'react-router';

const router = (
  <Provider store=store>
    <Router history=history>
      <Route path="/" component=Main>
        <IndexRoute component=GraphChart></IndexRoute>
        <Route path="/view" component=Single></Route>
      </Route>
    </Router>
  </Provider>
)

render(router, document.querySelector('#react-container'));

【问题讨论】：

本视频介绍了如何将 redux devtool 连接到基本的 react redux 应用 - youtu.be/TSOVLXQPWgA

【参考方案1】：

我认为这里的问题是您的商店是一个函数，当您调用它时会创建实际商店，而不是商店的实例。

试试这样的。将 configureStore 导出为 myStore.js 中的函数

import  createStore, applyMiddleware, compose  from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from './reducers/reducers';
import devTools from 'remote-redux-devtools';

const loggerMiddleware = createLogger()

export default function configureStore(initialState) 
   const storeCreator = createStore(rootReducer, initialState,
      window.devToolsExtension && window.devToolsExtension()
   );
   return storeCreator;

并在您的 main.js 中导入 configureStore 并使用此处的初始数据创建存储。获得商店实例后，您可以在此处同步历史记录。

import React from 'react';
import  render  from 'react-dom';
import  Provider  from 'react-redux';
import data from './dummydata/data'
import css from  './styles/stylesheets/style.css';

import createStore from './store';
import  browserHistory  from 'react-router';
import  syncHistoryWithStore  from 'react-router-redux';
import Main from './components/Main';
import Index from './components/Index';
import Single from './components/Single';
import GraphChart from './components/GraphChart';

import  Router, Route, IndexRoute  from 'react-router';
const initialState = 
  data
;
const store = createStore(initialData)
const history = syncHistoryWithStore(browserHistory, store);

const router = (
  <Provider store=store>
    <Router history=history>
      <Route path="/" component=Main>
        <IndexRoute component=GraphChart></IndexRoute>
        <Route path="/view" component=Single></Route>
      </Route>
    </Router>
  </Provider>
)

render(router, document.querySelector('#react-container'));