导入语法 React Redux

Question

您好，我正在处理购物清单，我的文件如下所示：

import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import ShoppingList from './components/ShoppingList';

import {Provider} from 'react-redux';
import store from './';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {
  return (
    <Provider store={store}>
    <div className="App">
     <AppNavbar/> 
     <ShoppingList/>
    </div>
    </Provider>
  );
}

export default App;

但是，我收到了这个错误： 编译失败 ./src/App.js 尝试导入错误：“./”不包含默认导出（导入为“商店”）。

有人可以帮忙解决这个问题吗？

Answer 1

您的代码中的问题是您如何尝试使用import store from './'; 加载store。

相反，您需要使用来自redux 的createStore()，如下所示：

import { createStore, applyMiddleware } from 'redux';

const store = createStore(
    /* your reducers */,
    applyMiddleware( /* your middleware */ ),
);

你可以传递给<Provider />的内容如下：

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

在此处进一步了解createStore(reducer, \[preloadedState\], \[enhancer\])：

创建一个包含应用程序完整状态树的 Redux 存储。您的应用中应该只有一个商店。

我希望这会有所帮助！

Answer 2

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import reducers from './reducers';

import Posts from './containers/Posts'
import NavBar from './components/NavBar';

// Apply Thunk middleware
const middleware = applyMiddleware(thunk);
// Create store
const store = createStore(reducers, enhancer);

class App extends Component {
 render() {
    return (
  <Provider store={store}>
      <React.Fragment>
        <NavBar />
        <Posts />
      </React.Fragment>
  </Provider>
);

如您所见，app.js 页面应如下所示。您不能只从另一个文件导入商店。最好使用这样的最佳实践。 现在你会想知道减速器是怎么来的。通常，开发人员将所有 reducer 放在一个 reducers 文件夹中。在该文件夹中，您可以拥有一个 index.js 文件和其他 reducer 文件。现在，你最好使用一个空的 main reducer index.js，如下所示。

 import { combineReducers } from 'redux'

 const rootReducer = combineReducers({
      null
  })

  export default rootReducer;

如果你喜欢 post 之类的，代码应该这样修改。

import { combineReducers } from 'redux'

import posts from './posts';

const rootReducer = combineReducers({
    posts: posts
 })

 export default rootReducer;

简单地说，posts 是 reducers 文件夹中的一个 post reducer。选择合适的中间件取决于您。我用过 redux-thunk。您可以使用 redux-saga、redux-logic 或自定义中间件。我认为这将帮助您解决问题。