Пытаюсь сделать так, чтобы после получения данных с сервера компонент автоматом обновлялся. Нашел информацию про функцию 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);