Я создаю приложение в стиле Dashboard, которое будет показывать перебои в обслуживании данных. Бэкэнд - это Rails 6, и я использую React / Redux во внешнем интерфейсе (в Rails). У меня много проблем (из-за моей зелёности в Redux) с переводом данных во внешний интерфейс и отображением состояния в реквизит. Очень хотелось бы, чтобы кто-то посмотрел на мое приложение и увидел, где я ошибаюсь Похоже, у меня тоже проблемы с лексическим поведением.
Вот верх приложения:
import React from 'react';
import { render } from 'react-dom'
import Dashboard from './Dashboard';
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from 'redux'; // we get our store from redux library and we need middleware to wire up Thunk
import thunk from 'redux-thunk';
import reducers from './reducers/rootReducer';
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/css/bootstrap.min.css";
const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, storeEnhancers(applyMiddleware(thunk)));
// this is how you hook up
store.subscribe(() => {
console.log('the new state is', store.getState());
console.log('----------');
});
render(
<Provider store={store}>
<Dashboard />
</Provider>,
document.body.appendChild(document.createElement('div')),
)
Это наиболее заметный компонент Dashboard.js
import React, { Component } from "react";
import RecurringOutagesContainer from "./containers/RecurringOutagesContainer";
import FutureOutagesContainer from "./containers/FutureOutagesContainer";
import CurrentOutagesContainer from "./containers/CurrentOutagesContainer";
import CreateModalComponent from "./components/CreateModalComponent";
import { Container, Row, Col, Image } from "react-bootstrap";
import { getFutureOutages } from "./actions/fetchFutureOutagesAction";
import { getRecurringOutages } from "./actions/fetchRecurringOutagesAction";
import { getServices } from "./actions/fetchServicesAction";
import { connect } from 'react-redux';
class Dashboard extends Component {
state = {
services: [],
outages: [],
showModal: false
};
componentDidMount() {
this.props.getFutureOutages()
this.props.getRecurringOutages()
this.props.getServices()
}
render() {
console.log(this.props)
return (
<div>
<Container>
<Row>
<Col sm={1}>
<img
src={require("./public/logo-2-dashboard.png")}
alt="logo"
id="logo"
></img>
</Col>
<Col md={8}></Col>
</Row>
</Container>
<div className="container">
<div className="d-flex justify-content-md-end bd-highlight">
</div>
</div>
<div className="d-flex justify-content-center bd-highlight dashboard">
<div className="d-flex justify-content-start bd-highlight">
<div className="d-fliex pastOutages">
<h4>Past Outages</h4>
</div>
</div>
<div className="d-flex justify-content-center bd-highlight">
<div className="d-fliex currentOutages">
<h4>Current Outages</h4>
<div className="container">
<div className="col-12">
<CurrentOutagesContainer currentOutages={this.props.services} />
</div>
</div>
</div>
</div>
<div className="d-flex align-items-center flex-column bd-highlight">
<div className="d-fliex justify-content-center">
<h4>Future Outages</h4>
<div className="container" id="futureOutages">
<div className="col-12">
<FutureOutagesContainer futureOutages={this.props.futureOutages} />
</div>
</div>
<h4>Recurring Outages</h4>
<div className="container" id="recurringOutages">
<div className="col-12">
<RecurringOutagesContainer recurringOutages={this.props.recurringOutages} />
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => {
return {
futureOutages: state.futureOutages,
recurringOutages: state.recurringOutages,
services: state.services
}
};
const mapDispatchToProps = dispatch => {
return {
getFutureOutages: () => dispatch(getFutureOutages()),
getRecurringOutages: () => dispatch(getRecurringOutages()),
getServices: () => dispatch(getServices())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard); // this connects Dashboard to store
Вот один пример action file:
\\ fetchFutureOutagesAction.js
import axios from 'axios';
export const getFutureOutages = () => dispatch => {
axios.get("/future_outages")
.then(res => {
const futureOutages = res.data;
dispatch({ type: 'FUTURE_OUTAGES', payload: futureOutages });
})
.catch(res => console.log(res.errors));
};
У меня есть rootReducer:
import { combineReducers } from 'redux';
import { futureOutagesReducer } from './futureOutagesReducer';
import { recurringOutagesReducer } from './recurringOutagesReducer';
import { servicesReducer } from './servicesReducer';
export default combineReducers({
futureOutages: futureOutagesReducer,
recurringOutages: recurringOutagesReducer,
services: servicesReducer
});
, и вот пример файла reducer:
const initialState = {
futureOutages: []
}
export const futureOutagesReducer = (state = initialState, action) => {
switch (action.type) {
case 'FUTURE_OUTAGES':
return { futureOutages: [...state.futureOutages, action.payload] };
default:
return state;
}
}
Ошибки встречаются в файлах container, которые я передаю реквизитам из `Dashboard.jsx ':
import React from "react";
import FutureOutagesComponent from "../components/FutureOutagesComponent"
const FutureOutagesContainer = props => {
return (
<div>
{props.futureOutages && props.futureOutages.map((futureOutage, idx) => (
<FutureOutagesComponent key={idx} futureOutage={futureOutage} />
))
}
</div>
)
};
export default FutureOutagesContainer;
Когда я запускаю ./bin/webpack-dev-server.js, вот снимок ошибок в консоли, которую я получаю:
Итак, очевидно, что реквизит не передается правильно. Может кто-нибудь дать мне несколько советов по реализации этого лучше? У меня было все, что работало только с приложением React, но я действительно хочу иметь большую гибкость доступа к state через приложение.