0

Пытаюсь сделать так, чтобы после получения данных с сервера компонент автоматом обновлялся. Нашел информацию про функцию connect(), redux-logger показывает, что редюсер отрабатывает, redux-devtools показывает, что хранилище обновляется, но пропсы компонента не изменяются, соответственно компонент не перерисовывается. Как правильно подписать компонент на изменения хранилища.

Хранилище создаю так:

import {applyMiddleware, createStore} from "redux";
import {logger} from "redux-logger";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";

import reducers from "./reducers/combineReducer";

const middlewares = applyMiddleware(promise, thunk, logger);

export default createStore(reducers, middlewares);

Приложение:

import React from "react";
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import store from "../store";
//import ...

ReactDOM.render (
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Layout} />
        // прочие страницы
      </Switch>
    </BrowserRouter>
 </Provider>, document.querySelector ("#root"));

Собственно компонент:

import React from "react";
import { connect } from 'react-redux';

class Layout extends React.Component {
  render() {
    return (
      <div className="container">
        // разметка
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    data: state.data,
    page: state.page,
    fetching: state.fetching,
    fetched: state.fetched,
    error: state.error,
  };
}

export default connect(mapStateToProps)(Layout);
11
  • ну так а где функция запроса вызвается?
    – WVFFLIFE
    28 янв 2020 в 18:36
  • Повешена на кнопку. Там экшн срабатывает и логгер фиксирует работу редьюсера, если нужно могу привести код компонента
    – Nick
    28 янв 2020 в 18:42
  • да, обнови вопрос и добавь туда код этого компонента
    – WVFFLIFE
    29 янв 2020 в 7:21
  • Добавил разметку компонента, а заодно и экшн с редюсером.
    – Nick
    29 янв 2020 в 9:52
  • fetchSmallData и fetchBigData откуда в Layout?
    – WVFFLIFE
    29 янв 2020 в 10:28

1 ответ 1

0

Разобрался. Причина была там, где ее не ждали, а именно в

import reducers from "./reducers/combineReducer"

В хранилище попадала более сложная структура данных, а именно

export default combineReducers({
  data: fetchDataReducer
})

Исправление требовалось в

function mapStateToProps(state) {
  return {
    data: state.data.data,
    page: state.data.page,
    fetching: state.data.fetching,
    fetched: state.data.fetched,
    error: state.data.error,
  };
}

Поля, на которые изначально ориентировался компонент всегда оставались undefined, поэтому компонент и не обновлялся.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.