＆＃34;找不到商店＆＃34;使用Redux chrome扩展时

Question

我对redux chrome扩展程序有疑问。

我的configureStore.js文件中有以下代码：

import {createStore, applyMiddleware} from 'redux';
import rootReducer from '../reducers/index';
import thunk from 'redux-thunk';

export default function configureStore(initialState){
  return createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  );
}

我在tutorial上添加了window.devToolsExtension ? window.devToolsExtension() : f => f。

但是当我尝试运行扩展时，我得到了

修改

import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';
import routes from './routes';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './assets/sass/main.scss';
import '../node_modules/font-awesome/css/font-awesome.css';

import {loadCourses} from './actions/courseActions';
import {loadAuthors} from './actions/authorActions';
import {Provider} from 'react-redux';
import configureStore from './store/configureStore';

const store = configureStore();
store.dispatch(loadCourses());
store.dispatch(loadAuthors());

render(
  <Provider store={store}><Router history={browserHistory} routes={routes}/></Provider>, document.getElementById("app")
);

有什么建议吗？

Answer 1

我已经从here获得了解决方案。

正确的代码是：

import {createStore, applyMiddleware, compose} from 'redux';
import rootReducer from '../reducers/index';
import thunk from 'redux-thunk';

export default function configureStore(initialState){
  return createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(thunk),
      window.devToolsExtension ? window.devToolsExtension() : f => f
    )
  );
}

Answer 2

好的，只需查看Redux Dev Tools的官方存储库，我发现他们建议您使用__REDUX_DEVTOOLS_EXTENSION__代替devToolsExtension。

所以在这次更新后，我的代码和de connectino与插件开始像魅力一样工作。

这是一个示例代码，如果它可以帮助任何人：

const enhancers = compose(
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

const store = createStore(
  rootReducer,
  defaultState,
  enhancers
);

Answer 3

现在有一个更简单的解决方案来自redux-devtools人。参见：

第1.3节使用来自https://github.com/zalmoxisus/redux-devtools-extension

的npm的redux-devtools-extension软件包

基本上，如果您在npm安装redux-devtools-extension，您可以：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

在我的情况下，我只有一个中间件（redux-thunk），但我有一个initialState，所以它看起来像这样：

const store = createStore(reducer, initalState, composeWithDevTools(applyMiddleware(thunk)))
store.subscribe(() => console.log("current store: ", JSON.stringify(store.getState(), null, 4)))

Answer 4

因为它在原始存储库 https://github.com/zalmoxisus/redux-devtools-extension 中给出，您必须导入 compose 作为命名导入并通过添加 applyMiddleware 方法作为输入来运行此 compose 方法；

import { createStore, applyMiddleware, compose } from 'redux';
...
...
+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ wcomposeEnhancers(
    applyMiddleware(...middleware)
));

Answer 5

我来晚了，但可能会帮助别人，我的解决方案是使用连接组件

import {connect} from 'react-redux'
...
class MyComponent extends Cmponent{
...
}
export default connect()(MyComponent)

Answer 6

如果有人遵循与我相同（或相似）的boilerplate server-side rendering React app setup，则可能要确定是否存在使用createStore()的单独的服务器和客户端文件。以我为例，当我需要将服务器文件放入客户端文件时，我花了很多时间。

可能不是最好的方法，但是，a，我使用的样板代码就是这样做的。

Answer 7

我写了一个简单的解决方案，希望它会有用（这不是确定的解决方案）：

1. 我必须右键单击Redux Devtools Extension

2. 打开远程DevTools

3. 然后将“设置”更改为使用 localhost：3000

的自定义服务器

它有效

Answer 8

对于这些都不起作用的任何人，请尝试重新启动服务器。我尝试了一段时间，然后决定重新启动服务器。为我解决了