React & Redux @ Grillcon 2017

React & Redux talk from Grillcon 2017

Transcript

1. React & Redux
2. Web, internet och programvaruteknik Winterkvist.com Prisjakt Mattias Lyckne
3. React
4. ” A Javascript Library for buidling user interfaces
5. Learn Once, Write Anywhere
6. React React Native React Native Windows React Native for web React VR React Hardware React PDF Learn Once, Write Anywhere React DocX React Sketchapp React Blessed Spectacle and much more
8. function Text(props) { return <p>{props.text}</p>; }
9. import React from 'react'; class Text extends React.Component { render() { return <p>{this.props.text}</p>; } }
10. import React from 'react'; import Text from './text'; import ReactDOM from 'react-dom'; ReactDOM.render( <Text text="Hello Grillcon!" />, document.getElementById('root') );
11. import React from 'react'; class TextInput extends React.Component { constructor(props) { super(props); this.state = { text: props.text }; } handleChange(evt) { this.setState({text: evt.target.value}); } render() { return ( <div> <input onChange={this.handleChange} value={this.state.text} /> <p>{this.state.text}</p> </div> ); } }
12. Internal state Lifecycle methods Stateful component No internal state No lifecycle methods Stateless component
13. DEMO
15. Redux
16. ” Redux is a predictable state container for JavaScript apps.
17. Actions Redux Reducers Store
18. Payload of information you send to the store. Actions { type: 'SAVE_SEARCH', query: 'Playstation' }
19. Function that creates an action Action creators function saveSearch(query) { return { type: 'SAVE_SEARCH', query: query, }; }
20. Take an action and specify how the application states changes. Reducers function reducer(state, action) { if (action.type === 'SAVE_SEARCH') { return { ...state, savedSearches: state.savedSearches.concat(action.query) }; } return state; }
21. Brings the actions and reducers together. Holds the application state. Store
22. 1. store.dispatch(action); 2. Redux store calls the reducer 3. Redux store saves the state returned by the root reducer Redux flow
23. yarn add redux react-redux Install
24. DEMO
26. What about side effects?
27. Aims to make side effects easier and better Redux Saga
28. Testing
29. Easy setup Instant feedback Snapshots Jest React Testing Utility jQuery-like API to manipulate and traverse React components Enzyme
30. import { shallow } from enzyme; import SaveSearch from '../save-search'; describe('SaveSearch', () => { it('renders without crashing', () => { shallow(<SaveSearch />); }); it('calls function on onClick', () => { const func = jest.fn(); const wrapper = shallow(<SaveSearch onClick={func} />); wrapper.find('button').simulate('click'); expect(func).toHaveBeenCalled(); }); });
31. yarn create react-app yarn add redux react-redux yarn add --dev redux-devtools yarn add --dev enzyme react-test-renderer Start coding
32. Questions? mattias.lyckne@prisjakt.nu @MattiasLyckne