无法在 redux 开发工具中查看状态数据

Posted 2023-03-08

【中文标题】无法在 redux 开发工具中查看状态数据

【英文标题】：Unable to view state data in redux dev tools

【发布时间】：2020-03-04 11:26:26

【问题描述】：

我正在学习 redux 并想出了一个使用 web 服务的示例 返回数据。一切正常。但是我配置了 redux 开发者工具 下面。

我收到一条错误消息，提示我的商店已分配一个值但从未使用过，当我进入时 我的开发工具，我无法看到我的状态数据。我是不是做错了什么？

        import React from 'react';
        import ReactDOM from 'react-dom';
        import  BrowserRouter as Router, Route  from 'react-router-dom';
        import promise from 'redux-promise';
        import  Provider  from 'react-redux';
        import  createStore, applyMiddleware, compose  from 'redux';

        import reducers from './reducers';
        import ProductsIndex from './components/products_index';

        const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

        const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
        const store = createStore(
          reducers,
          composeEnhancers(applyMiddleware())
        );

        ReactDOM.render(
          <Provider store=createStoreWithMiddleware(reducers)>
           <Router>
            <div>
              <Route path="/" component=ProductsIndex />
            </div>
           </Router>
          </Provider>
          , document.querySelector('#root'));

错误：第 14:7 行：“store”被分配了一个值，但从未使用过 no-unused-vars

【问题讨论】：

能否请将const createStoreWithMiddleware = applyMiddleware(promise)(createStore); 更改为const createStoreWithMiddleware = applyMiddleware(promise)(store); 并放在store 初始化之后。不确定applyMiddleware 语法让我们试试看。

或者你可以这样做：const middleware = [promise];const composEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;const enhancer = composEnhancers(applyMiddleware(...middleware));const configureStore = (initialState?: any) => return createStore(reducers, initialState, enhancer); ;<Provider store=configureStore() >

这些都不适合我

错误是什么？

从您提供的第一个解决方案中，我得到了 TypeError: createStore.apply is not a function

【参考方案1】：

这是我通常做的事情。

configureStore.js

import  createStore, applyMiddleware, compose  from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
import createRootReducer from "../reducers";

const middleware = window.ENV.environment === "local" ? [thunk, logger] : [thunk];
const composEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composEnhancers(applyMiddleware(...middleware));

const configureStore = (initialState) => 
  return createStore(createRootReducer(), initialState, enhancer);
;

export default configureStore;

App.js

import configureStore from "./configureStore";
const store = configureStore();

const App = () => 
  return (
    <Provider store=store>
      <BrowserRouter basename=process.env.PUBLIC_URL>
        // ...
      </BrowserRouter>
    </Provider>
  );
;