React with Redux应用程序仅在安装了redux工具时才有效

在开发 React 应用程序时，Redux 是一个常用的状态管理库。Redux DevTools 是一个非常有用的调试工具，但你的应用程序不应该依赖于 Redux DevTools 才能正常运行。如果你的应用程序在没有安装 Redux DevTools 的情况下无法运行，可能是因为你在配置 Redux store 时没有正确处理 Redux DevTools 的可选性。

以下是如何正确配置 Redux store，使其在没有 Redux DevTools 的情况下也能正常工作。

安装必要的依赖

首先，确保你已经安装了 Redux 和 React-Redux：

npm install redux react-redux

配置 Redux Store

在配置 Redux store 时，你可以使用 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 来检测 Redux DevTools 是否可用。如果不可用，则使用 Redux 提供的 compose 函数。

以下是一个示例：

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

// 检查 Redux DevTools 扩展是否可用
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);

export default store;

使用 Provider 包装应用程序

确保你的应用程序被 Provider 组件包裹，并且传入了正确配置的 store。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

完整示例

以下是一个完整的示例，展示如何配置 Redux store 以确保在没有 Redux DevTools 的情况下也能正常工作。

1. 安装依赖

npm install redux react-redux redux-thunk

2. 创建 Redux Store

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

// 检查 Redux DevTools 扩展是否可用
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);

export default store;

3. 创建根 Reducer

// src/reducers/index.js
import { combineReducers } from 'redux';
// 导入你的其他 reducers
import exampleReducer from './exampleReducer';

const rootReducer = combineReducers({
  example: exampleReducer,
  // 其他 reducers
});

export default rootReducer;

4. 创建一个示例 Reducer

// src/reducers/exampleReducer.js
const initialState = {
  data: []
};

const exampleReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_DATA':
      return {
        ...state,
        data: action.payload
      };
    default:
      return state;
  }
};

export default exampleReducer;

5. 使用 Provider 包装应用程序

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

6. 创建主应用程序组件

// src/App.js
import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, Redux!</h1>
    </div>
  );
};

export default App;

通过这种方式，你的 React 应用程序将正确配置 Redux store，并且在没有 Redux DevTools 的情况下也能正常运行。