Intro course presentation for building Modern Web Apps with React, MobX, Redux, Angular, and etc. This presentation outline fundamental concepts used by these tools.
Github repo - https://github.com/stanimirtt/modern-web-apps-development-course-2018
17. 1/ State Should Be Minimally Defined
1. No Caching
2. No Data Duplication
3. No Cascading State Changes
18. 2/ Everything Should Be Derived
1. Automatically
2. Define derivations and reactions
3. Mobx ensures efficiency and consistency
19.
20.
21. observable
Enables MobX to observe your data
observer
MobX ensures that this component is consistent with the state
computed
Mobx ensures that this value is consistent with the state
23. 1/ Define your state and make it observable
1. import { observable } from 'mobx';
2. const appState = observable({
items: [],
selectedItem: ''
});
24. 2/ Create a view that responds to changes in the
State
1. import { observer } from 'mobx-react';
2. export default observer(App);
3. ReactDOM.render(<App appState={appState} />,
document.querySelector('.container'));
25. 3/ Modify the State
1. appState.setSelectedItem = action(item => {
appState.selectedItem = item;
});
2. this.props.appState.setSelectedItem(response.data);
34. State
The state of your whole application is stored in an object tree within a single store.
console.log(store.getState())
/* Prints
{
itemSelected: {...},
items: [
{
id: 1,
title: 'My Item',
},
...
]
}
*/
35. Actions
The only way to change the state is to emit an action, an object describing what
happened.
store.dispatch({
type: 'ITEM_SELECTED',
item: { … }
})
36. Reducers
To specify how the state tree is transformed by actions, you write pure reducers.
function itemSelected(state = [], action) {
switch (action.type) {
case 'ITEM_SELECTED':
return action.item;
default:
return state
}
}
39. Wrap-up
1. Add reducer in reducers folder with name of state key (Redux)
2. Import the created reducer in reducers/index.js and register with
combineReducers
3. Add action creator in action/index.js file
4. Identify which component need to be connect to the store (Redux)
5. Create a container file in containers folder
6. Import the component that need props and dispatch from the store in that
container
40. 7. Wire the component to the store with the container following these steps:
a. import { connect } from 'react-redux';
b. import { bindActionCreators } from 'redux'; // in case you need to dispatch an action
c. const mapStateToProps = state => ({ items: state.items });
d. const mapDispatchToProps = dispatch => bindActionCreators({ onItemSelect: selectItem }, dispatch);
// in case you need to dispatch an action
a. export default connect(mapStateToProps, mapDispatchToProps)(Component); // name of the imported
component
VS Code Extensions:
GitLense
Prettier formatter
ESLint
Spelling Checker
Settings for VS Code:
https://gist.github.com/stanimirtt/4537fe1ad1f3c209043e305dc0e2b990