From cbd99a6425b7d1e852dfd1979e85669bcded27c6 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 1 Oct 2017 16:08:59 -0400 Subject: [PATCH] Updates, 2017-10-01 --- es6-features.md | 8 ++ framework-comparisons.md | 10 ++ functional-programming.md | 4 + git-resources.md | 4 + javascript-resources.md | 4 + mobx-tutorials.md | 8 ++ project-structure.md | 5 + pros-cons-discussion.md | 10 ++ react-architecture.md | 4 + react-implementation.md | 12 +++ react-performance.md | 3 +- react-redux-testing.md | 8 ++ react-server-rendering.md | 7 +- react-state-management.md | 20 ++-- react-styling.md | 8 ++ react-techniques.md | 4 + react-tutorials.md | 5 + redux-architecture.md | 14 ++- redux-reducers-selectors.md | 162 +++++++++++++++++++++++++++++++++ redux-side-effects.md | 4 + redux-techniques.md | 4 - redux-tutorials.md | 5 + redux-ui-management.md | 7 +- webpack-advanced-techniques.md | 4 + 24 files changed, 308 insertions(+), 16 deletions(-) diff --git a/es6-features.md b/es6-features.md index 463c6ec..e4852df 100644 --- a/es6-features.md +++ b/es6-features.md @@ -154,6 +154,10 @@ http://dealwithjs.io/es6-features-10-use-cases-for-proxy/ Lists a variety of ways that ES6 proxies can be used, with links to examples +- **Stop JavaScripting Like It's 1999** + https://www.slideshare.net/HunterLoftis1/connecttech-2017-stop-javascripting-like-its-1999 + A slideshow that illustrates how to use async/await and Promises to write cleaner-looking file handling code in a Node environment. + #### Generators @@ -225,6 +229,10 @@ https://github.com/justsml/escape-from-callback-mountain/ An opinionated suggested approach for writing promise callbacks to form a pipeline +- **ES6 Promises: Patterns and Anti-Patterns** + https://medium.com/datafire-io/es6-promises-patterns-and-anti-patterns-bbb21a5d0918 + Several useful techniques for using Promises, such as "promisifying" callback-based functions and running promises in parallel or sequence, and some common mistakes to avoid like not actually returning anything in a promise callback. + #### Techniques diff --git a/framework-comparisons.md b/framework-comparisons.md index e797ed8..4d9687b 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -1,5 +1,15 @@ ### Javascript Framework Comparisons +#### React, Angular, Ember, and Vue + +- **Angular vs React vs Vue: A 2017 Comparison** + https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176 + The best framework comparison article I've seen. Covers multiple important considerations when choosing a framework, clearly describes the pros, cons, approaches, and tradeoffs of each library, and gives some suggestions for why you might want to choose one framework over the other. Also links to several additional comparison articles at the end. + +- **Comparing Frontend Approaches** + https://medium.com/@peterxjang/comparing-frontend-frameworks-part-1-introduction-6cf3d49e42cf + A series that builds the same notes app with jQuery, Vue, React, and Elm, and compares the pros and cons of the approaches. + #### React and Flux vs Backbone diff --git a/functional-programming.md b/functional-programming.md index 58732fe..38c83d6 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -158,3 +158,7 @@ - **What's Functional Programming All About?** http://www.lihaoyi.com/post/WhatsFunctionalProgrammingAllAbout.html A detailed explanation of how "functional" programming differs from "imperative" programming, using a food recipe as an example of the steps involved. + +- **Higher Order Functions and Redux Thunk** + https://medium.com/@joedski/higher-order-functions-and-redux-thunk-1e5983ae6b03 + An exploration of ways to wrap behavior around thunks, including composing functions together. diff --git a/git-resources.md b/git-resources.md index 21e5d14..b6fa4f5 100644 --- a/git-resources.md +++ b/git-resources.md @@ -52,6 +52,10 @@ - **Getting Git** https://gettinggit.com/ A paid video tutorial series that covers Git commands in detail, as well as everyday scenarios you might encounter while using Git + +- **Learn Enough Git to Be Dangerous** + https://www.learnenough.com/git-tutorial + A tutorial that teaches practical use of Git basics, Github, and Git workflows. #### Tips and Useful Info diff --git a/javascript-resources.md b/javascript-resources.md index 67a93df..e53cd84 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -168,6 +168,10 @@ While this list is primarily focused on learning React and Redux, and generally - **Which Array Function When?** https://dev.to/andrew565/which-array-function-when A great explanation of the differences between the various methods that can loop over arrays (`map`, `filter`, `reduce`, and `forEach`), and when you should use each one. + +- **What is This in Javascript?** + https://developer.telerik.com/topics/web-development/what-is-this-in-javascript/ + An easy-to-read explanation of the different ways `this` can be defined in a function. #### Paid Courses and Books diff --git a/mobx-tutorials.md b/mobx-tutorials.md index e757a43..5330ac3 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -74,6 +74,14 @@ https://engineering.huiseoul.com/7-tips-of-using-mobx-6ca8c35071dc Some helpful tips for using MobX, including using the right reactions, using reactions with names, using strict mode, and more. +- **Mobx React - Best Practices** + https://medium.com/@daniel.bischoff/mobx-react-best-practices-17e01cec4140 + Several tips for good use of MobX with React, including separating API calls from stores, injecting stores into components, using @computed, and more. + +- **The Curious Case of Mobx State Tree** + https://medium.com/@mweststrate/the-curious-case-of-mobx-state-tree-7b4e22d461f + Michel Weststrate, author of MobX, introduces the MobX-State-Tree library, which builds on MobX to add additional useful capabilities. + #### MobX and Redux Comparisons diff --git a/project-structure.md b/project-structure.md index 4849de9..ac9a15b 100644 --- a/project-structure.md +++ b/project-structure.md @@ -87,7 +87,12 @@ - **Decoupling Hierarchies for Maintainable Code** https://medium.com/altschool-engineering/decoupling-hierarchies-for-maintainable-code-b13c24b2f047 + Some very interesting thoughts on how component structure, data flow, and folder structure can interact with each other. - **Writing Scalable React Apps with the Component Folder Pattern** https://medium.com/styled-components/component-folder-pattern-ee42df37ec68 Describes a specific variation on "feature folders" that puts all files for a given component in a separate folder, as well as an approach for providing configurable component rendering with default behavior as a fallback. + +- **Fractal: A React app structure for infinite scale** + https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af + \ No newline at end of file diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index d7c8cad..0f7d9a1 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -55,6 +55,10 @@ http://engineering.teacherspayteachers.com/2017/08/02/why-we-chose-react-to-help-serve-millions-of-educators.html The Teachers Pay Teachers team describes why they chose React to rebuild their UI, including the small API size, size of the community, battle-tested capabilities, and more. +- **Why Redux is the Future of Angular 2 and React** + https://rangle.io/resources/why-redux-future-of-angular-react/ + A webinar video from Rangle.io, discussing the benefits of functional components and Redux for state management, and how Redux can be used with both React and Angular. + #### Redux/Flux Comparisons @@ -253,6 +257,12 @@ similar structures in ClojureScript. https://twitter.com/_jayphelps/status/846226930416345088 Jay Phelps, author of redux-observable, starts a long and involved Twitter thread about when it's appropriate to use Redux - use cases, app sizes, and reasons. Lots of interesting opinions. +- **"Redux app size, boilerplate, and abstraction"** + https://news.ycombinator.com/item?id=15341562 + https://news.ycombinator.com/item?id=15344600 + https://news.ycombinator.com/item?id=15344447 + A long subthread of the "React 16" announcement post that discusses several aspects of Redux "boilerplate" and abstraction. I answered a lot of questions about how Redux can and should be used, and there were actually some excellent comments about how Redux usage pays off for long-term app maintainability. + #### React's PATENTS License diff --git a/react-architecture.md b/react-architecture.md index 6b25faa..c629aed 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -248,6 +248,10 @@ https://www.robinwieruch.de/learn-react-before-using-redux/ Robin Wieruch covers a list of key React concepts you should be familiar with before trying to tackle learning Redux or other major state management libraries. +- **7 architectural attributes of a reliable React component** + https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/ + An excellent list of principles to consider when designing React components, including single responsibility, encapsulation, reusability, testability, and meaning. + #### React Architecture diff --git a/react-implementation.md b/react-implementation.md index 3fb60d2..e41f87c 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -100,6 +100,10 @@ http://www.mattgreer.org/articles/react-internals-part-four-setState/ A 5-part series that will recreate React from the ground up, illustrating how it works along the way. +- **Making a custom React renderer** + https://github.com/nitin42/Making-a-custom-React-renderer + A 4-part that teaches how to build a React reconciler for React 16 that renders to a Word document + #### Implementation and Internals @@ -181,6 +185,14 @@ #### React Fiber +- **React v16.0** + https://reactjs.org/blog/2017/09/26/react-v16.0.html + The React team officially announces the release of React 16 and describes the new features, including returning arrays, error handling, better server-side rendering, and more. + +- **React 16: A look inside an API-compatible rewrite** + https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/ + The React team describes how they handled building and testing React 16 to be backwards compatible with existing code. + - **ReactConf 2017: A Cartoon Intro to Fiber** https://youtu.be/ZCuYPiUIONs A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations. diff --git a/react-performance.md b/react-performance.md index ff30e43..0739882 100644 --- a/react-performance.md +++ b/react-performance.md @@ -142,7 +142,8 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) - **Optimizing React Rendering** https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02 - Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`. Has a link to further discussion on HN. + https://flexport.engineering/optimizing-react-rendering-part-2-7b2e9a9ea21f + Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`. Has a link to further discussion on HN. Part 2 describes how they built a library called `mutation-sentinel` to detect accidental mutations. - **Introducing react-wastage-monitor** https://blog.listium.com/introducing-react-wastage-monitor-404565d679b2 diff --git a/react-redux-testing.md b/react-redux-testing.md index 3190bc9..8e9e6d0 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -237,6 +237,14 @@ - **Testing Replicated Redux** http://jimpurbrick.com/2017/07/31/testing-replicated-redux/ Describes how the use of "property testing" to generate possible actions helped the author track down bugs in his distributed multiplayer Redux application. + +- **Test-Driven Development with React and Redux, using Redux TDD** + https://medium.freecodecamp.org/test-driven-development-with-react-and-redux-using-redux-tdd-3fd3be299918 + Describes using a specific set of helper functions to drive testing the behavior and data flow of a React+Redux application. + +- **Writing tests for redux-observable** + https://dev.to/julioolvr/writing-tests-for-redux-observable + Quick examples of how to set up tests for redux-observable epics. diff --git a/react-server-rendering.md b/react-server-rendering.md index a2a6ba6..fde932a 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -56,4 +56,9 @@ - **Introducing Second: a framework for mostly-static React applications** https://wildlyinaccurate.com/introducing-second-a-framework-for-mostly-static-react-applications/ - Describes a new library for rendering static sites with React, with the ability to opt-in to "dehydrating" certain components on the client to make them interactive. \ No newline at end of file + Describes a new library for rendering static sites with React, with the ability to opt-in to "dehydrating" certain components on the client to make them interactive. + + +- **Simple declarative Redux state with React Router 4 server side rendering** + https://medium.com/@AlexFaunt/satisfying-your-apps-state-343118b0730d + Demonstrates using a combination of React-Router 4 and a custom promise middleware to manage async data handling in an SSR React+Redux application. \ No newline at end of file diff --git a/react-state-management.md b/react-state-management.md index e17050c..5d90a37 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -2,6 +2,18 @@ #### State Types and Data Flow +- **A Visual Guide to State in React** + https://daveceddia.com/visual-guide-to-state-in-react/ + Describes what "state" is, what kinds of data should be included into React state, and how state flow relates to component updates. + +- **ReactJS: Props vs State** + http://lucybain.com/blog/2016/react-state-vs-pros/ + Explains that "props" are data passed in to a component, while "state" is data managed inside a component. + +- **Props vs State** + https://github.com/uberVU/react-guide/blob/master/props-vs-state.md + A quick summary of the differences between "props" and "state" in React components + - **The 5 Types of React Application State** http://jamesknelson.com/5-types-react-application-state/ Describes different categories of state: data, communication, control, session, and location @@ -31,14 +43,6 @@ http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html Some excellent suggestions and approaches for state handling and structure. -- **A Visual Guide to State in React** - https://daveceddia.com/visual-guide-to-state-in-react/ - Describes what "state" is, what kinds of data should be included into React state, and how state flow relates to component updates. - -- **ReactJS: Props vs State** - http://lucybain.com/blog/2016/react-state-vs-pros/ - Explains that "props" are data passed in to a component, while "state" is data managed inside a component. - - **React state management patterns** http://vijayt.com/post/react-state-management-patterns/ Useful summaries of some common patterns for managing state (encapsulated vs uni-directional flow, single store or multiple stores, shared state between components). diff --git a/react-styling.md b/react-styling.md index b15136a..667cc21 100644 --- a/react-styling.md +++ b/react-styling.md @@ -10,6 +10,10 @@ http://andrewhfarmer.com/how-to-style-react/ An excellent overview of the four major ways to deal with styles in React, and what the various tools are. Includes a decision tree to help you decide what to use. +- **Understand the React Styling Paradigms** + http://jsramblings.com/2017/09/22/understand-the-react-styling-paradigms.html + An excellent, very readable summary of the three main ways to deal with styles in React (plain CSS, CSS modules, and CSS-in-JS). Lists some pros and cons for each one, and points to some additional resources for learning about them. + - **CSS in JS** http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html Christopher Chedeau's classic talk that inspired the "CSS in JS" revolution @@ -111,6 +115,10 @@ https://reactarmory.com/answers/should-i-use-css-in-js Some opinionated thoughts on the pros and cons of using CSS-in-JS approaches, including concerns about possibly security issues. +- **Writing a CSS-in-JS Library from Scratch** + https://medium.com/@tkh44/writing-a-css-in-js-library-from-scratch-96cd23a017b4 + The author of the Emotion library shows how to build a simple CSS-in-JS library, to help illustrate how they work. + #### Style Libraries diff --git a/react-techniques.md b/react-techniques.md index 9cffe54..fe41ece 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -19,6 +19,10 @@ https://www.robinwieruch.de/react-svg-patterns/ A tutorial that covers several aspects of using SVG in React, and demonstrates how to use the svg-patterns library to generate patterend backgrounds. +- **Translating React Apps** + https://tech.gadventures.com/translating-react-apps-99dede52d924 + Discusses how to use the React-Intl library to add translations to a React app + #### Security diff --git a/react-tutorials.md b/react-tutorials.md index 3db06c8..a5bfb68 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -382,6 +382,11 @@ Also see the course sites listed in the [Community Resources](community-resource http://www.robinwieruch.de/the-road-to-learn-react/ A pay-what-you-want ebook that teaches a good foundation for React itself, including React component patterns, working with data (fetching, sorting, and filtering), unit testing, and more. The author's blog posts are excellent, and this book is definitely recommended. +- **Taming the State in React** + https://www.robinwieruch.de/learn-react-redux-mobx-state-management/ + https://roadtoreact.com/course-details?courseId=TAMING_THE_STATE + A book and set of course material from the author of "The Road to Learn React", covering state management with setState, Redux, and MobX. + - **Learn Pure React** https://daveceddia.com/learn-pure-react/ A paid ebook that lays out a guided step-by-step process for learning React quickly and in the right order, with a focus on the fundamentals of React. diff --git a/redux-architecture.md b/redux-architecture.md index dd2b4cd..e513dbc 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -264,6 +264,10 @@ https://medium.com/@uttamkini/scaling-redux-part-1-codebase-organization-80f978cd8a72 https://medium.com/@uttamkini/scaling-redux-part-2-organizing-state-8a1c5e8fffbf Several suggestions for managing a Redux codebase, including use of feature folders / ducks, separating data and UI state in the store, organizing data by API structure, and more. + +- **Tips for success with React and Redux** + https://medium.com/@AlexFaunt/tips-for-success-with-react-and-redux-b782c6b22ff0 + Advice on how much of your React component tree should be connected to Redux, using non-HTML components to manage things like document titles, consistently using actions for app behavior, and moving app logic out of components. #### Encapsulation and Reusability @@ -423,4 +427,12 @@ - **MVC implemented by React and Causality-Redux** https://medium.com/dailyjs/mvc-implemented-by-react-and-causality-redux-c4125a01e95c https://medium.com/@causality_redux/react-redux-how-to-write-significantly-less-code-c0562ff06d5a - A pair of posts discussing how to use the "causality-redux" library to implement an MVC-type architecture on top of React and Redux. \ No newline at end of file + A pair of posts discussing how to use the "causality-redux" library to implement an MVC-type architecture on top of React and Redux. + +- **Connecting React components to a Redux store with render callbacks** + https://medium.com/@gott/connecting-react-component-to-redux-store-with-render-callback-53fd044bb42b + Demonstrates using the React "render props" pattern to pass down data from a Redux store, rather than using `connect`. + +- **"Anyone using Redux with a render prop?"** + https://twitter.com/threepointone/status/913701233394900992 + A Twitter thread discussing use of render props as an alternative to `connect`. Includes a reply by Dan Abramov, who points out that this is how React-Redux originally worked, but it was changed to an HOC to better deal with side effects from state changes. \ No newline at end of file diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index e69de29..aca31a8 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -0,0 +1,162 @@ +### Redux Reducers and Selectors + + +#### Reducers + +- **Redux Docs: Structuring Reducers** + http://redux.js.org/docs/recipes/StructuringReducers.html + Comprehensive information on writing reducers and structuring data, covering reducer composition, use of `combineReducers`, normalizing data, proper immutable updating, and more. + +- **"Reducer composition without slicing state"** + https://www.reddit.com/r/javascript/comments/42ey9e/redux_reducer_composition_without_slicing_state/ + Discussion of ways to organize actions and reducer logic + +- **Taking Advantage of `combineReducers`** + http://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/ + Examples of using `combineReducers` multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic. + +- **The Power of Higher-Order Reducers** + http://slides.com/omnidan/hor#/ + A slideshow from the author of redux-undo and other libraries, explaining the concept of higher-order reducers and how they can be used + +- **Modifying a Leaf of the Redux State Tree** + http://cmichel.io/modifying-a-leaf-of-the-redux-state-tree/ + Some useful observations on how to properly do deep immutable updates. + +- **"How to dynamically load reducers for code splitting in a Redux application?"** + http://stackoverflow.com/questions/32968016/how-to-dynamically-load-reducers-for-code-splitting-in-a-redux-application + Dan Abramov gives a basic exapmle of how to rebuild and replace the root reducer function at runtime + +- **Inject reducer arbitrarily rather than top level for Redux store to replace reducer** + https://medium.com/@jimmy_shen/inject-reducer-arbitrarily-rather-than-top-level-for-redux-store-to-replace-reducer-fdc1060a6a7 + A quick example of the basic approach to injecting additional reducers at runtime + +- **State Snapshots in Redux** + http://kyleshevlin.com/state-snapshots-in-redux/ + Describes a useful technique for saving copies of state slices on command, and re-applying those copies at a later point to ensure a known starting point for further actions. + +- **"Problems with Flux"** + http://www.code-experience.com/problems-with-flux/ + Discusses the idea of having all state updates for an action listed in one place, vs spread throughout the store. Written shortly after the release of Redux, but definitely relevant. + +- **Redux Tree** + https://blog.shakacode.com/redux-tree-efc9e3d22d6e + Looks at structuring a reducer/state tree as "branches" and "leaves", and introduces the idea of an "interaction" to encapsulate all related state changes for a given action, with a library to implement the idea. + +- **Reducer composition with Higher Order Reducers** + https://medium.com/@mange_vibration/reducer-composition-with-higher-order-reducers-35c3977ed08f + Some great examples of writing small functions that can be composed together to perform larger specific reducer tasks, such as providing initial state, filtering, updating specific keys, and more. + +- **Using Currying to Compose Reducers** + http://www.guyzissman.com/posts/pipe-reducers/ + Some short but helpful examples of how currying functions can be used to reuse reducer logic for similar use cases. + +- **Higher Order Reducers - It just sounds scary** + https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705 + Explains how reducers can be composed like Lego bricks to create reusable and testable reducer logic. + +- **Functional Redux Reducers with Ramda** + https://alligator.io/react/functional-redux-reducers-with-ramda/ + Shows how to write a somewhat complex Redux reducer using only composition of functions from the Ramda library + +- **Combine Redux reducers like a Tetris ninja** + https://engineering.legalstart.fr/combine-redux-reducers-like-a-tetris-ninja-6f4eb690aed5 + Discusses the intended use case and limitations of `combineReducers`, and presents a custom utility called `combineMultiKeyReducers` that will pass along specified slices of state to a reducer. + +- **A small trick to write clean reducers** + https://hackernoon.com/a-small-trick-to-write-clean-reducers-a0b1b1eff3d2 + Shows a contrived example of updating deeply nested state, and discusses use of `lodash/fp` to simplify the update logic instead. + + +#### Selectors and Normalization + +**Related topics**: +- [Redux Architecture - Encapsulation](./redux-architecture.md#encapsulation-and-reusability) +- [Redux Performance](./react-performance.md#redux-performance) + + +- **Querying a Redux Store** + https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f + A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions. + +- **Normalizing Redux Stores for Maximum Code Reuse** + https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95 + Thoughts on how normalized Redux stores enable some useful data handling approaches, with examples of using selector functions to denormalize hierarchical data. + +- **Redux Normalizr: Improve your State Management** + http://www.robinwieruch.de/the-soundcloud-client-in-react-redux-normalizr/ + A tutorial describing how to use Normalizr for improved data management of nested data in Redux + +- **Using normalizr.js in a Redux store** + https://medium.com/@mcowpercoles/using-normalizr-js-in-a-redux-store-96ab33991369 + Some examples of using Normalizr and selectors to manage normalized data + +- **Memoize-Immutable: efficient memoizer for Redux** + https://blog.prototypo.io/memoize-immutable-efficient-memoizer-for-redux-and-other-immutable-environments-59277fefa45f + Discusses principles of immutability and memoization, and a library they built to help memoize Redux data lookups + +- **Two mistakes I made working with Redux** + http://www.mattzeunert.com/2016/06/01/redux-mistakes.html + Some suggestions on how to handle denormalizing data and defining actions. + +- **Practical Redux: Using Redux-ORM** + http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/ + http://blog.isquaredsoftware.com/2016/10/practical-redux-part-2-redux-orm-concepts-and-techniques/ + A look at how Redux-ORM can help manage normalized data in a Redux store, including use cases, basic usage, key concepts, and advanced techniques. + +- **"How do you add/remove to a redux store generated with normalizr?** + http://stackoverflow.com/questions/34954726/how-do-you-add-remove-to-a-redux-store-generated-with-normalizr + Stack Overflow discussion of how to handle updates to normalized data + +- **"Any deep-dive/advanced tutorials on reselect?"** + https://www.reddit.com/r/reactjs/comments/5dxasp/any_deepdiveadvanced_tutorials_on_reselect/ + Discussion on passing arguments to Reselect selectors, and how to use "factory functions" to define per-component selectors for Redux `mapState` functions + +- **ReactCasts #8: Selectors in Redux** + https://www.youtube.com/watch?v=frT3to2ACCw + A great overview of why and how to use selector functions to retrieve data from the store, and derive additional data from store values + +- **GraphQL is not only for Backend** + https://riad.blog/2017/01/07/graphql-is-not-only-for-backend-react-redux/ + A look at how to use GraphQL to query into a Redux store + +- **Dissecting Twitter's Redux Store** + https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1 + https://medium.com/@nuncamind/diving-deeper-into-twitters-redux-store-adventures-in-minified-vendor-javascript-67fbac5dc219 + An informative look at the contents of the Redux store for Twitter's new mobile site. The second article shows how to dig through the minified JS to enable use of the Redux DevTools against a production site. + +- **Advanced Redux Entity Normalization** + https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5 + Describes a "keyWindow" concept for tracking subsets of entities in state, similar to an SQL "view". A useful extension to the idea of normalized data. + +- **"Why are you supposed to normalize data in Redux?"** + https://twitter.com/AdamRackis/status/847883670950219776 + A Twitter thread with some excellent discussion, explaining why use of normalized data is encouraged with Redux. + +- **Redux Clerk: Reusable action creators and reducers for async CRUD** + https://inside.getambassador.com/redux-clerk-reusable-action-creators-and-reducers-for-async-crud-b0b6954f7056 + Discussion of a library that tries to reduce the repetitive nature of async CRUD work in Redux + +- **json-api-normalizer: An Easy Way To Integrate the JSON API and Redux** + https://www.smashingmagazine.com/2017/05/json-api-normalizer-redux/ + An in-depth article discussing why normalization of data is a good practice with Redux, and how use of the JSON API format can make normalized data easier to work with. + +- **How I Stumbled Upon Normalizing Redux State** + http://kyleshevlin.com/how-i-stumbled-upon-normalizing-redux-state/ + A short summary of the benefits and concept behind normalizing state + +- **React, Reselect, and Redux** + https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c + An explanation of how Reselect's memoized selector functions are useful in Redux apps, and how to create unique selector instances for each component instance. + +- **Use Selectors in Redux for Great Good** + https://medium.com/@TomasEhrlich/use-selectors-in-redux-for-great-good-59286ce2e2a1 + A short article explaining the importance of selectors, with a few examples of how they benefit applications and how to use them. + +- **Reselect with Redux and React** + https://www.youtube.com/watch?v=6Xwo5mVxDqI + A screencast that introduces the Reselect library and discusses why it's useful in Redux apps + +- **The only reducer you will ever need** + https://medium.com/riipen-engineering/the-only-reducer-you-will-ever-need-4dd41206f980 + Demonstrates using Normalizr and seamless-immutable to write a generic entity merging reducer \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index 32c2754..b3a854a 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -246,6 +246,10 @@ https://medium.com/rumors/redux-firebase-and-the-saga-in-between-c2bd5adf6de1 Discussion and examples of how to use sagas to simplify and generalize interaction with Firebase in a Redux app. +- **When should I use a saga?** + https://medium.com/@felixclack/when-should-i-use-a-saga-708cb3c75e9a + Some quick rules of thumb for determining if building a saga is a good choice for a given feature. + #### Other Side Effect Approaches diff --git a/redux-techniques.md b/redux-techniques.md index 4c7a709..88b96d1 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -52,10 +52,6 @@ https://medium.com/@jamiedixon/how-to-treat-errors-as-first-class-citizens-in-flux-and-redux-fca7f3d5c02d Discusses how the FSA structure expects actions to have an optional `error` field, and how to write code that deals with that. - - - - #### Other diff --git a/redux-tutorials.md b/redux-tutorials.md index f384b44..4074ffb 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -133,6 +133,11 @@ https://medium.com/netscape/beginners-guide-to-react-redux-how-to-start-learning-and-not-be-overwhelmed-af04353101e A good writeup from a React/Redux beginner, with advice on how to get started learning React and Redux, how to approach building your first meaningful React+Redux application, and related topics such as file structure, data flow, and rendering logic. +- **Getting Started with Redux** + https://www.sitepoint.com/getting-started-redux/ + https://www.sitepoint.com/redux-not-art-structuring-state-react-apps/ + A pair of very readable tutorials for getting started with Redux. The first introduces Redux's core concepts while building out a small shopping cart example, and the second describes how to transition from storing data using React's `setState` over to putting it in Redux instead, and gives examples of managing real-world form state with Redux. + #### Project-Based Tutorials diff --git a/redux-ui-management.md b/redux-ui-management.md index 227494b..9574083 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -110,4 +110,9 @@ - **Here's what you can do to make migrating your forms to Redux easier in the future** https://goshakkk.name/prep-forms-for-redux/ - Simple but useful advice on extracting form logic as reducer functions inside of classes \ No newline at end of file + Simple but useful advice on extracting form logic as reducer functions inside of classes + +- **Forms with Redux Form v7** + https://codeburst.io/forms-with-redux-form-v7-part-1-of-2-e636d760e9b4 + https://codeburst.io/forms-with-redux-form-v7-part-2-of-2-f44ffee4a34d + An extensive tutorial on Redux-Form that covers a variety of topics, including basic setup, making reusable form components, styling, dynamic fields with dependencies, real-time validation, and more. \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 4a50296..1c27ef0 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -225,6 +225,10 @@ https://medium.com/@Pinterest_Engineering/introducing-bonsai-an-open-source-webpack-analyzer-6bdfe22f8984 The Pinterest team describes the problems they'd encountered optimizing their Webpack bundles, and introduces a new tool to help analyze bundles and dependency trees. +- **Size Limit: Make the Web Lighter** + https://evilmartians.com/chronicles/size-limit-make-the-web-lighter + Demonstrates writing a tiny library that results in a 100KB Webpack bundle, and then walks through improving the Webpack settings to improve bundle size to only 17B. + #### Hot Module Replacement