React / Redux экспорт по умолчанию connect (), кажется, не подключен к провайдеру

Question

[решено] Проверьте мои ответы

Я изучаю MERN Stack с помощью плейлиста YouTube https://www.youtube.com/watch?v=TO6akRGXhx8. Я застрял, когда достиг 28:04, где он забыл подключить свой компонент с помощью response-redux. Я следил за тем, как он это решает, но хорошо, по какой-то причине мой, похоже, не связан. Никакие реквизиты не были переданы моему компоненту ItemModal. Поэтому я потратил 3 часа на отладку и, наконец, пришел к выводу, что мне показалось странным, что только когда js называется ShippingList, будет работать connect () ... Когда я переименовал ShippingList в другое имя и обновил ссылки, он больше не работает. Пожалуйста, обратитесь к ниже для некоторых фрагментов

Я не думаю, что мне нужно идентифицировать компонент в магазине при его создании ... так что я сейчас ошеломлен ..

Интересно, ребята, можете ли вы повторить это, пожалуйста, найдите мой репо. https://github.com/AmeDin/mern

ShoppingList.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

export class ShoppingList extends Component {


  render() {
    console.log(this.props)
    console.log(this.state)
    //const { items } = this.props.item;
    return (
      <div>

      </div>
    )
  }
}



const mapStateToProps = (state) => ({
    item: state.item
})

export default connect()(ShoppingList);

ShoppingListOne.js

import React, { Component } from 'react'
import { connect } from 'react-redux';

export class ShoppingListOne extends Component {


  render() {
    console.log(this.props)
    console.log(this.state)
    //const { items } = this.props.item;
    return (
      <div>

      </div>
    )
  }
}



const mapStateToProps = (state) => ({
    item: state.item
})

export default connect()(ShoppingListOne);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './reducers/index'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import * as serviceWorker from './serviceWorker';

const middleware = [thunk];

const store = createStore(rootReducer, 
    compose(
        applyMiddleware(thunk)
    )
);
ReactDOM.render(<Provider store={store}><App /></Provider>, 
document.getElementById('root'));

serviceWorker.unregister();

Снимок экрана console.log: https://i.stack.imgur.com/FPBBs.png

Дальнейшее тестирование ShoppingListOne

const mapStateToProps = (state) => ({
    item: state.item
})

const mapDispatchToProps = (dispatch) => {
  console.log(dispatch)

}

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingListOne);

ShoppingList

const mapStateToProps = (state) => ({
    item: state.item
})


const mapDispatchToProps = (dispatch) => {
  console.log(dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingList);

Кажется, функции для ShoppingListOne не вызваны. В ShoppingList есть функция line26, третий ряд консоли.

https://i.stack.imgur.com/WxwRm.png

Answer 1

Вам необходимо передать функцию mapStateToProps в качестве первого аргумента connect, чтобы сделать эти значения доступными для компонента, подключенного к хранилищу резервов.Соединение без каких-либо аргументов не делает ничего, кроме как делает dispatch доступным в качестве опоры для подключенного компонента

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect(mapStateToProps)(ShoppingListOne);

и

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect(mapStateToProps)(ShoppingList);

Также вам необходимо убедиться, что выимпортировал подключенный компонент, который ShoppingListOne экспортируется как экспорт по умолчанию, а не как именованный экспорт

Ваш импорт будет выглядеть как

import ShoppingListOne from './path/to/ShoppingListOne';

Answer 2

Вы должны передать mapStateToProps и mapDispatchToProps в connect , чтобы он мог создать оболочку, имеющую доступ к хранилищу приставок.

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingList);
export default connect(mapStateToProps, mapDispatchToProps)(ShoppingListOne);

Answer 3

Обнаружил проблему ...

Кажется, что оператор import играет свою роль в соединении ..

Error

import { ShoppingList } from './components/ShoppingList';
import { ItemModal } from './components/ItemModal';

Корректное

import ShoppingList from './components/ShoppingList';
import ItemModal from './components/ItemModal';

Кто-нибудь знает различия? Интересно, есть ли там ответ на это сообщение?