{feed.text}
; } else { let display = feed.selftext == "" ? `${feed.title}: ${feed.url}` : feed.selftext; return{display}
; } })} }); } else { return } } } export default SocialTracker "So, we start by setting the local state to manage the Twitter user and Reddit us, as follows:." constructor() { super(); this.state = {twitter: 'twitter', reddit: 'twitter'} } [ 255 ] Redux and React "In the render method, we fetch the values (the store) that are being passed down as props by Redux to the component in order to be displayed:" let {filterTweets, filterReddits} = this.props; let {showTweets, showReddits} = this.props.social; "Now, if you recall the following:" function mapStateToProps(state) { return { social: state.social } } "We are converting the state from Redux to pass the social object store from Redux as a prop to the component We are then fetching the values such as showTweets, showReddits, and so on from the social prop value." "Similarly, we have the following code:" function mapDispatchToProps(dispatch) { return bindActionCreators(SocialActions, dispatch) } "This converts the actions and passes them down as the props We are receiving them as filterTweets and filterReddits on props We then make use of these actions as the onclock event handler, as follows:" "Finally, we have the display of the feed itself by fetching the values from the props in the same way:" renderFeed() { let {feed} = this.props.social; let feedCollection = ArrayUtil.in_groups_of(feed, 3); if (feed.length > 0) { return feedCollection.map((feedGroup, index) => { console.log(feedGroup); return {feedGroup.map((feed) => { if (feed.type == 'tweet') { return{feed.text}
; } else { [ 256 ] Chapter 13 let display = feed.selftext == "" ? `${feed.title}: ${feed.url}` : feed.selftext; return{display}
; } })} }); } else { return } } "We will fetch the feed from the social prop being passed to us, as follows:" let {feed} = this.props.social; "Finally, to sync the contents we have the following code:" syncFeed() { const { fetchTweets, fetchReddits } = this.props; fetchReddits(this.state.reddit); fetchTweets(this.state.twitter); console.log('syncFeed was called'); } "Awesome I guess that with this, we are done!" "Yup Would you like to recap the setup?" "Sure We started by setting up how we want to map the actions and stores to the props being sent to the components We then set up the store and connect it to the component." "To set up the store, we made use of and applied the thunk middleware module to enhance Redux in order to allow us to dispatch the actions asynchronously." "We then created actions to be called from the component and wrap the payloads and action type to be delivered to the store." "We also created the reducers—social reducer—to actually manipulate, create, and return new Redux states." [ 257 ] Redux and React "That's right! Let's take a look at how it looks, shall we?" "Awesome! Carla is going to love this." Summary We took a look at using Redux and setting it up We saw how it differs from pure Flux implementation that we saw previously We took a look at different components of Redux—its stores, actions, and reducers for the stores and actions Finally, we saw how the app connects with the store and we make use of actions and data provided to the component via props [ 258 ] Index A action 221, 222 add-ons about 127, 128 commands, available 132, 133 immutability helpers 128-132 animate 193-201 app (application) building 10, 11 setting up 65 B Babel URL 112, 205 used, for ES6 204, 205 used, for JSX 204, 205 Backbone models and data models 182, 183 creating 170, 171 defined Backbone models, incorporating 172 Bootstrap modal adding 103, 104 build tools 210 C cloneWithProps add-on 133 component life cycle about 54 methods 55-62 components building 6-9 controlled 68 data, passing 15-20 multiple components 25-30 namespaced components 32-34 uncontrolled 70 components, cloning about 134-139 apps testing, helpers used 139 Jest, setting up 139, 140 React components, testing behavior 142 React components, testing structure 141, 142 D data passing, from react-router links 186, 187 passing, to components 15-20 data models and Backbone models 182, 183 delivery details 85-90 development tools 203 dispatcher 221, 222 DOM component 105, 106 DOM operations performing 150, 151 shouldComponentUpdate hook, using 157-161 time taken to render, determining 151, 152 wasted time, determining 152-157 E ES6 Babel, using for 204, 205 ES2015 35 ESLint about 205-207 URL 205, 208 [ 259 ] F fat arrow syntax about 74 URL 74 fetch 117 Flux actions 225-230 architecture 220-224 stores 230-242 unidirectional flow 220-224 forms about 63-68 events 74-76 validating 79-81 wizard 70-73 H Hot Module Replacement (HMR) 214-217 HTML converting to JSX, URL 24 tags, versus React components 24 I immutability helpers 128-131 immutable data about 164-166 reference link 166 immutable data structures URL 133 import URL 66 initial state setting 52 J JavaScript expressions 31 JSX, transforming into 23, 24 Jest automatic mocking feature, URL 141 setting up 139, 140 URL 140 JSX (JavaScript XML) about 22 Babel, using for 204, 205 conditionals 40 gotchas 38-40 styles 36-38 transforming, into JavaScript 23, 24 L loaders about 213, 214 URL 214 lorempixel service URL 170 M mixins 91-102 model updates 187-192 Model-View-Controller (MVC) 220 N non-DOM attributes 41, 42 O Object.assign method URL 130 objects 35 Open Library API endpoint URL 4, 114 P parent-child relationship 76-79 PERF add-on installing 148-150 props default props, specifying 49, 50 interactive 68 this.props.children, modifying 50, 51 validation 47, 48 versus states 53, 54 PureRenderMixin about 161 anti-pattern 163, 164 installing 161, 162 reference link 164 [ 260 ] R React about add-ons 127, 128 apps performance, optimizing 147 data flow 46, 47 DOM operations, performing 150, 151 forms 63, 64 getting, to render on server 109-123 URL React components testing, behavior 142-144 testing, structure 142 versus HTML tags 24 React Developer Tools about 208-210 URL 210 ReactJS 3, React library react-router Pinterest example, URL 168 reddits URL 229 Redux about 244, 245 setting up 246-258 URL 244, 245 refs 105-107 S self-closing tag 25 server component, pre-rendering 124, 125 server-side rendering 124, 125 shallowCompare 163, 164 shallow rendering 144 shipping details 81-84 shouldComponentUpdate hook using 157-161 Single Page Application (SPA) spread attributes 35 spread operator URL 35 starter project URL 110 state about 51 avoiding 52 initial state, setting 52 setting 52 versus props 53, 54 static data displaying 12-15 store 221 T this.props.children modifying 50, 51 V view 222 virtual DOM 148 W Webpack about 210, 211 configuring 211, 212 Hot module replacement (HMR) 214-217 loaders 213, 214 [ 261 ]