Introduction to React & Redux
4 likes730 views
This document provides an introduction and overview of React and Redux. It discusses key concepts like components, props, state, lifecycle methods, JSX, and the virtual DOM in React. It also covers Flux architecture and how Redux implements a unidirectional data flow with actions, reducers, and a single store. Additional topics include connecting React to the Redux state, immutable updates with Object.assign(), and testing React and Redux applications. Useful resources for learning more are provided at the end.
![=
function App() {
return React.createElement('div', null, [
React.createElement('h1', null, 'I am a component!'),
React.createElement('h2', null, 'I am a sub title')
]);
}
function App() {
return (
<div>
<h1>I am a component!</h1>
<h2>I am a sub title</h2>
</div>
);
}](https://image.slidesharecdn.com/reactintro-160531134817/85/Introduction-to-React-Redux-18-320.jpg)
![The reducer
action = {
type: 'RENAME_RECIPE',
recipeId: 871,
name: 'Pancake'
};
const reducer = (state, action) => {
switch (action.type) {
case ‘RENAME_RECIPE':
const { recipeId, newName } = action;
state.recipes[recipeId].name = newName;
return state;
}
return state;
};](https://image.slidesharecdn.com/reactintro-160531134817/85/Introduction-to-React-Redux-48-320.jpg)
![The reducer
action = {
type: 'RENAME_RECIPE',
recipeId: 871,
name: 'Pancake'
};
const reducer = (state, action) => {
switch (action.type) {
case ‘RENAME_RECIPE':
const { recipeId, newName } = action;
state.recipes[recipeId].name = newName;
return state;
}
return state;
};](https://image.slidesharecdn.com/reactintro-160531134817/85/Introduction-to-React-Redux-49-320.jpg)
![The reducer
const reducer = (state, action) => {
switch (action.type) {
case ‘RENAME_RECIPE':
const recipe = state.recipes[action.recipeId];
const newRecipe = Object.assign({}, recipe, {
name: action.newName
});
const newRecipes = Object.assign({}, state.recipes, {
[action.recipeId]: newRecipe
});
return Object.assign({}, state, {
recipes: newRecipes
});
}
return state;
};](https://image.slidesharecdn.com/reactintro-160531134817/85/Introduction-to-React-Redux-50-320.jpg)
![Why not direct?
state.recipes[recipeId].name = newName;](https://image.slidesharecdn.com/reactintro-160531134817/85/Introduction-to-React-Redux-58-320.jpg)
Introduction to React & Redux
- 1. Intro to React & Redux Boris Dinkevich http://500Tech.com [email protected]
- 2. Boris Dinkevich - React evangelist - Past Angular hippie - CoAuthor of The Complete Redux Book CoFounder @ 500Tech
- 3. ES2015 (ES6)
- 4. Const & Let Strings Arrow functions Destructuring
- 5. A WORD ON TOOLS
- 6. npm - package repository babel - transpiler webpack - build tool
- 8. HISTORY
- 12. Lifecycle methods Mount componentWillMount → Angular PreLink componentDidMount → Angular PostLink Update componentWillUpdate componentDidUpdate Unmount componentWillUnmount → $scope.$on('destroy')
- 13. Virtual DOM
- 15. Recipe Ingredients Eggs Recipe Ingredients MilkEggs New Virtual DOM Recipe Ingredients Eggs Old Virtual DOM Real DOM !=
- 16. JSX
- 18. = function App() { return React.createElement('div', null, [ React.createElement('h1', null, 'I am a component!'), React.createElement('h2', null, 'I am a sub title') ]); } function App() { return ( <div> <h1>I am a component!</h1> <h2>I am a sub title</h2> </div> ); }
- 19. PROPS
- 20. Passing Props const Add = (props) => ( <h2>Its: { props.a + props.b }</h2> ); const App = () => ( <Add a={ 2 } b={ 3 } /> );
- 21. Repeating with JavaScript (3/3) const Recipes = ({ recipes }) => ( <div> <h1>Recipes</h1> <ul> { recipes.map((recipe) => <Recipe recipe={ recipe } />) } </ul> </div> );
- 22. CLASSES
- 23. Make <App /> into a class class App extends React.Component { render() { return ( <div> <Recipes recipes={ recipes }/> </div> ); } }
- 24. Component Lifecycle class MyComponent extends React.Component { constructor() { } render() { } getInitialState() { } getDefaultProps() { } componentWillMount() { } componentDidMount() { } componentWillReceiveProps() { } shouldComponentUpdate() { } componentWillUpdate() { } componentDidUpdate() { } componentWillUnmount() { } } https://facebook.github.io/react/docs/component-specs.html
- 25. CHANGE DETECTION
- 26. Change detection Props change State change - setState() Forced - forceUpdate()
- 27. Add a recipe after 1sec constructor() { super(); setTimeout(() => { console.log(`Adding new recipe`); recipes.push('Shakshuka'); }, 1000); }
- 28. PROP TYPES
- 29. Setting PropTypes AddRecipe.propTypes = { addRecipe: React.PropTypes.func.isRequired }; add-recipe.js https://facebook.github.io/react/docs/reusable-components.html
- 30. FLUX
- 31. MVC FLUX
- 32. Flux
- 35. Game engine Store Recipes Waffles App Add RecipeRecipes Recipe…Omelette Pancakes Recipe… Recipe…
- 36. REDUX
- 37. Click Timeout AJAX Websocket EVERYTHING IS AN ACTION Add Recipe Toggle Favorite Fetch Recipes Start Network
- 39. Many reducers can be chained Must return a new state — never modify previous one Object.assign or Immutable Only one store REDUCERS
- 40. CONNECT
- 41. State to React Store Recipes Recipe 1 Recipe 2 App Recipes Add Recipe Recipe 1 Recipe 2
- 42. State to React Store Recipes Recipe 1 Recipe 2 App Recipes Add Recipe Recipe 1 Recipe 2
- 43. State to React Store Recipes Recipe 1 Recipe 2 App Recipes Add Recipe Recipe 1 Recipe 2
- 45. Connect function mapStateToProps(state) { return {}; } function mapDispatchToProps(dispath) { return {}; } connect(mapStateToProps, mapDispatchToProps)(App);
- 46. MUTATE STATE
- 48. The reducer action = { type: 'RENAME_RECIPE', recipeId: 871, name: 'Pancake' }; const reducer = (state, action) => { switch (action.type) { case ‘RENAME_RECIPE': const { recipeId, newName } = action; state.recipes[recipeId].name = newName; return state; } return state; };
- 49. The reducer action = { type: 'RENAME_RECIPE', recipeId: 871, name: 'Pancake' }; const reducer = (state, action) => { switch (action.type) { case ‘RENAME_RECIPE': const { recipeId, newName } = action; state.recipes[recipeId].name = newName; return state; } return state; };
- 50. The reducer const reducer = (state, action) => { switch (action.type) { case ‘RENAME_RECIPE': const recipe = state.recipes[action.recipeId]; const newRecipe = Object.assign({}, recipe, { name: action.newName }); const newRecipes = Object.assign({}, state.recipes, { [action.recipeId]: newRecipe }); return Object.assign({}, state, { recipes: newRecipes }); } return state; };
- 51. Object.assign() const original = { name: 'Cat', age: 3 }; const updated = Object.assign({}, original, { name: 'Dog' }); updated > { name: 'Dog', age: 3 } updated === original > false
- 54. REFERENCE TREES State Recipes Omelette Pancaek User Boris T1 State Recipes Omelette Pancake User Boris T2
- 56. ACTION #2 State Recipes Omelette Pancaek User Boris State Recipes Omelett Pancake User Boris T1 T2 State Recipes Bacon Pancake User Boris T3
- 57. IN MEMORY State Recipes Omelette Pancaek User Boris State Recipes Pancake State Recipes Bacon T1 T2 T3
- 58. Why not direct? state.recipes[recipeId].name = newName;
- 59. OH, NO! State Recipes Omelette Pancaek User Boris State Recipes Pancake State Recipes Bacon T1 T2 T3 Omelett User Boris User Cat Pancake
- 60. OUT SIDE CHANGE State Recipes Omelette Pancaek User Cat State Recipes Pancake State Recipes Bacon T1 T2 T3
- 61. OH, NO! State Recipes Omelette Pancaek User Cat State Recipes Pancake State Recipes Bacon T1 T2 T3 Omelett User Cat User Cat Pancake
- 62. Console work s1 = store.getState() - Do an action s2 = store.getState() - Do an action s3 = store.getState() store.dispatch({ type: ‘SET_STATE’, payload: s1 });
- 63. Console work s1 = store.getState() - Do an action s2 = store.getState() - Do an action s3 = store.getState() store.dispatch({ type: ‘SET_STATE’, payload: s1 });
- 64. Console work s1 = store.getState() - Do an action s2 = store.getState() - Do an action s3 = store.getState() store.dispatch({ type: ‘SET_STATE’, payload: s1 });
- 65. Console work s1 = store.getState() - Do an action s2 = store.getState() - Do an action s3 = store.getState() store.dispatch({ type: ‘SET_STATE’, payload: s1 });
- 66. UNDO / REDO
- 67. BUT… 1. Actions like LOGIN 2. Actions from Middleware / Redux-Thunk 3. Layout / UI
- 69. ACTION CREATORS
- 70. Actions export const addRecipe = (name) => ({ type: 'ADD_RECIPE', name: name });
- 71. ROUTING
- 72. React Router import { Router, Route, browserHistory } from 'react-router' render( <Provider store={ store }> <Router history={ browserHistory }> <Route path="" components={ App }> <Route path="/add" component={ AddRecipe } /> <Route path="/" component={ Recipes } /> </Route> <Route path="*" component={ NotFound } /> </Router> </Provider>, document.getElementById('app') );
- 73. TESTS
- 74. Testing Karma - Test running - https://karma-runner.github.io/0.13/index.html Enzyme - Test utils for React - https://github.com/airbnb/enzyme Jasmine - Matcher and mocks - http://ricostacruz.com/cheatsheets/jasmine.html Redux tests - http://redux.js.org/docs/recipes/WritingTests.html
- 75. SUMMARY
- 76. Useful stuff Meetup: http://www.meetup.com/ReactJS-Israel/ Redux tutorial: https://egghead.io/series/getting-started-with-redux The code we built: https://bitbucket.org/500tech/react-redux-course