Intro course presentation for React with Redux. It is including how to make AJAX Request with React, use Middleware, Router, and Reselect. Github repo - https://github.com/stanimirtt/react-redux-course-2017

1. React / Redux
Stanimir Todorov, Tech Lead @ SoftServe
linkedin.com/in/stanimirt
github.com/stanimirtt
stanimir.todorof@gmail.com

2. Nowadays

3. Setup Environment

4. Project Structure
git clone git@github.com:stanimirtt/react-redux-course.git

5. React

6. Component
● JSX
● ES6 Import Statements
● ReactDOM

7. Items Page Wireframe

8. ● Export Statements
● Class-Based Components
● Handling User Events
● State
● Controlled Components vs Uncontrolled Components (refs)

9. Hands On

10. AJAX Requests with
React

11. ● Axios
● Props
● Keys
● Selection
● Styling

12. Component Lifecycle

13. Hands On

14. Redux

15. ReactRedux
Data Modeling

16. Hands On

17. 3 Principles
Single source of truth
State is read-only
Changes are made with pure functions

18. 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',
},
...
]
}
*/

19. Actions
The only way to change the state is to emit an action, an object describing what
happened.
store.dispatch({
type: 'ITEM_SELECTED',
item: { … }
})

20. 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
}
}

22. Containers - Connecting Redux to React

23. Hands On

24. 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

25. 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

26. Middleware

28. Hands On

29. React Router

30. Examples for Route
● Route: `http://localhost:8080/`
● Route: `http://localhost:8080/items/5`
● Route: `http://localhost:8080/items/new`
npm install --save react-router-dom

31. Reselect

32. Resources
● https://github.com/ryanmcdermott/clean-code-javascript#introduction
● https://vasanthk.gitbooks.io/react-bits/
● https://github.com/stanimirtt/react-redux-starter/
● https://github.com/stanimirtt/react-redux-course/
● https://gist.github.com/stanimirtt/4537fe1ad1f3c209043e305dc0e2b990