Синтаксис импорта 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 Попытка ошибки импорта: '. / 'не содержит экспорт по умолчанию (импортированный как' store ').

Может кто-нибудь помочь исправить это?

Answer 1

Проблема в вашем коде заключается в том, как вы пытаетесь загрузить store с помощью import store from './';.

Вместо этого вам нужно использовать createStore() из redux в следующем виде:

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>
);

Как видите, страница приложения. js должна выглядеть следующим образом. Вы не можете просто импортировать магазин из другого файла. Лучше использовать лучшие практики, как это. Теперь вы будете удивляться, как появились редукторы. Обычно разработчики помещают все редукторы в папку редукторов. В этой папке вы можете иметь файл index. js и другие файлы редуктора. На данный момент вам лучше использовать пустой индекс главного редуктора. 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 - это редуктор записей в папке редукторов. Выбор подходящего промежуточного программного обеспечения зависит от вас. Я использовал Redux-Thunk. Вы можете использовать redux-saga, redux-logi c или пользовательское промежуточное ПО. Я думаю, что это поможет вам решить вашу проблему.