Hack Bulgaria
github.com/HackBulgaria
.... is State Container
read-only
change only with actions
previous state
dispatching action
next state
Text
Text
... is responsible for pass the store down to others component
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { App } from './App';
import { appReducer } from './reducer.jsx';
const appReducer = combineReducers({
main: appReducer,
});
let store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('app'));
# Connected to the Store
# index.js
import { createStore, combineReducers } from 'redux';
import loginReducer from './containers/Login/reducer';
const appReducer = combineReducers({
login: loginReducer,
});
let store = createStore(reducer);
2) Create Store 3) Apply reducers
... as a React component with a Redux connection.
mapStateToProps(state)
import React from 'react';
import { connect } from 'react-redux';
import LoginForm from '../../components/loginForm'
export class Login extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<LoginForm props={this.props} />
</div>
)
}
};
const mapStateToProps = (state) => {
return {
isFetching: state.login.isFetching,
isAuthenticated: state.login.isAuthenticated,
token: state.login.token,
errorMessage: state.login.errorMessage
};
};
export default connect(mapStateToProps)(Login);
const OverviewSite = props => {
const { site } = props;
return (
<div className="overview-site">
<div className="site-address">
<div className="site-icon">CC</div>
<div className="site-address-info">
<div>{site.name}</div>
<div>{site.id}</div>
</div>
</div>
<div className="site-score">{site.total_score}</div>
<div className="site-priority">
<div className="priority-color"></div>
<div>{site.priority} Priority</div>
</div>
<div className="site-date-created">{site.created_at_date}</div>
<div className="site-units">{site.units}</div>
<div className="site-borough">{site.borough}</div>
</div>
)
}
export default OverviewSite;
By Hack Bulgaria