导入引导到 React Redux CRUD 应用程序 - JavaScript

如果你正在开发一个复杂的 React Redux 应用程序，那么在项目开始时就需要正确的引导和设置。虽然这个过程可能有点冗长，但它是确保你的应用程序在开始时就能够运行的重要步骤。

本文将介绍在一个 React Redux CRUD 应用程序中导入引导的相关内容。我们将讨论如何正确导入所有必需的库和设置，并设置 Redux Store 和 React Router。

导入必要的库

首先，我们需要导入所有的必要库。在我们的情况下，这将是 React、Redux、React Redux、React Router 和 React Router Redux。我们可以使用以下命令来安装它们：

npm install --save react redux react-redux react-router-dom react-router-redux

设置 Store

接下来，我们需要设置 Redux Store。我们将使用 combineReducers 函数来组合不同的 reducers。以下是设置Store的代码示例：

import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer,
  // other reducers...
});

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

在我们的情况下，我们还添加了 redux-form reducer，因为我们的应用程序中涉及表单。我们还将支持Redux DevTools扩展。

设置 React Router

最后，我们需要设置 React Router。我们将创建一个 Router 组件，将其包装在 Provider 中，以将 Redux Store 注入我们的应用程序：

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { Route } from 'react-router-dom';

import App from './components/App';
import configureStore, { history } from './store/configureStore';

const store = configureStore();

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={App} />
        // other routes...
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

我们使用 ConnectedRouter 将 Redux 的 store 和 React Router 集成在一起，并将它们传递给我们的根组件 App。

以上就是在一个 React Redux CRUD 应用程序中导入引导的所有必要设置。这些设置可能略显冗长，但是它们确保了我们的应用程序可以正确运行。