Нe получаю данные из Redux Store?

Question

[Остап]

Всем привет. Пишу СПА.
Компонент который связан с Редаксом отдает данные через диспатч, но не получает их.
сам компонент:

lass BookList extends Component {
    componentDidMount() {
        // 1. receive data
        const {bookstoreService} = this.props;
        const data = bookstoreService.getBooks();
        //console.log(data); // full

        // 2. dispatch action to store
        this.props.booksLoaded(data);

    }

    render() {
        const {books} = this.props;
        return (
            <ul>
                {books.map(
                    (book) => {
                    return (<li key={book.id}><BookListItem book={book}/></li>)
                    })
                }
            </ul>
        )
    }


}

const mapStateToProps = ({books}) => {
    // console.log(books); // empty
    return {books}
};
const mapDispatchToProps ={
   booksLoaded
};


export default withBookstoreService()(connect(mapStateToProps, mapDispatchToProps)(BookList));

Редьюсер:

const initialState = {
    books: []
};

const reducer = (state = initialState, action) => {
//console.log(action.payload); //full
    switch (action.type) {
        case 'BOOK_LOADED':
            return {
                books: action.payload
            };


        default:
            return state;
    }

};
export default reducer;

Экшн:

const booksLoaded = (newBooks) => {
  
    // console.log(newBooks);  //full
    return {
        type: 'BOOKS_LOADED',
        payload: newBooks
    }
};
export {booksLoaded};

Comments

[Егор Живагин]

withBookstoreService точно умеет работать с коннектнутым компонентом?

[Остап]

Егор Живагин,

import React from "react";
import {BookstoreServiceConsumer} from "../bookstore-service-context/bookstore-service-context";

const withBookstoreService = () => (Wrapped) => {
    return (props) => {
        return (
            <BookstoreServiceConsumer>
                {
                    (bookstoreService) => {
                        return (<Wrapped {...props}
                                         bookstoreService={bookstoreService}/>)
                    }
                }
            </BookstoreServiceConsumer>
        )
    }
};
export default withBookstoreService;

[Остап]

Егор Живагин, я думаю умеет. Но я бьюсь этой проблемой второй день и уже не в чем не уверен)))

[Егор Живагин]

Остап, ну, вы можете затестить -- просто убрать этот хок из компонента BookList и проверить, нормально ли отслеживаются изменения из стора. Тогда будет более понятно, куда копать

По коду тяжело что-то сказать, такое кол-во функций друг в друге запутывает. Если у вас получится выложить пример с проблемой на codesandbox, помочь будет значительно легче

[twolegs]

1. Провайдер со стором не забыли добавить?
2. getBooks выполняется синхронно?

Answer 1

[Александр Черемхин]

Актион без диспатч вызван

Class BookList extends Component {
    componentDidMount() {
        // 1. receive data
        const {bookstoreService} = this.props;
        const data = bookstoreService.getBooks();
        //console.log(data); // full

        // 2. dispatch action to store
       this.props.dispatch( this.props.booksLoaded(data)); // !!!! dispatch
    }
    ....

Comments

[paoluccio]

const mapDispatchToProps ={
   booksLoaded
};

При такой форме записи, в пропсы dispatch уже не придёт. Придёт booksLoaded ссылающийся на (...args) => dispatch(booksLoaded(...args)).

Link

[Остап]

paoluccio,

const mapDispatchToProps=(dispatch)=>{
     return{
         booksLoaded:(newBooks)=>{
             dispatch({
                 type:'BOOKS_LOADED',
                 payload:newBooks
             })
         }
     }
 }

так же не работает, если я вас правильно понял

[Остап]

Александр Черемхин, увы, ничего не поменялось

[Александр Черемхин]

нет чудес в этом прагматичном мире
BOOK_LOADED - в редьюсере и экшене по разному написан)
используйте константы для названий. проблем не будет.

[Остап]

Александр Черемхин, Спасибо огромное!!!!!

[Александр Черемхин]

спасибо это хорошо - еще бы пометить как решение...

[paoluccio]

Остап,

так же не работает, если я вас правильно понял

Нет, вы меня неправильно поняли. Я вам не предлагал менять код. Мой комментарий был к ответу Александр Черемхин.
Если в connect, mapDispatchToProps передаётся в виде объекта, то компонент уже не будет получать dispatch в свои пропсы.

Так работать не будет:

this.props.dispatch( this.props.booksLoaded(data));

Ссылочка на документацию в моём предыдущем комменте.