Plain react, hooks and/or Redux ?
0 likes138 views
The document discusses options for managing state in React applications, including using plain React with local component state, React hooks, and Redux. It notes the advantages of Redux in enforcing separation of concerns and improving testability through a functional approach to state management, but also the additional "boilerplate" of defining everything explicitly. It proposes using Redux for data with larger scope and hooks for local component state.
1 of 20
Download to read offline
![Hooks
Overview
7
[1] https://reactjs.org/docs/hooks-reference.html](https://image.slidesharecdn.com/plainreacthooksandorredux-200304155219/85/Plain-react-hooks-and-or-Redux-7-320.jpg)
![Hooks
● const [getter, setter] = useState(initialValue)
● useEffect( () => fetch()..., [deps])
○ Replaces componentDidMount, componentDidUpdate, and
componentWillUnmount
○ Can return cleanup function
● const ctx = createContext(); … useContext(ctx)
● useReducer()
Restriction: top level of React FunctionComponents
Using local state with React.FunctionComponent
8](https://image.slidesharecdn.com/plainreacthooksandorredux-200304155219/85/Plain-react-hooks-and-or-Redux-8-320.jpg)
![11
Hooks
Advantages
● Easy to learn
● “Hooks are a way to reuse stateful logic, not state itself.” [1]
Disadvantages
● State may still be local (when no context is used), so still has to be passed around
● Tight coupling, can be difficult to test, if not in separate functions
Using local state with React.FunctionComponent
[1] https://reactjs.org/docs/hooks-overview.html](https://image.slidesharecdn.com/plainreacthooksandorredux-200304155219/85/Plain-react-hooks-and-or-Redux-11-320.jpg)
![Redux and testing
● Pure functions are easy to test
○ f(Input) = Output
● Stateful functions are more difficult to test
○ f(Input, State) = (Output, newState)
● [Stateful functions running concurrently are very difficult to test]
● Redux enforces functional programming with state
○ side effects only at certain defined places: action creators and middleware
● => So easy to test
17](https://image.slidesharecdn.com/plainreacthooksandorredux-200304155219/85/Plain-react-hooks-and-or-Redux-17-320.jpg)
Ad
Recommended
Redux in Angular 2+
Redux in Angular 2+Hùng Nguyễn Huy The document discusses the importance of state management in modern frontend applications and compares the component-based approach with Redux for handling application state. It introduces Redux as a solution for managing complex state interactions, detailing its principles such as a single source of truth and the use of pure functions for changes. The document outlines when to use Redux and provides an overview of its components including stores, actions, and reducers.
Fabio Biondi - Front-end data architectures in Angular, Redux & NGRX - Codemo...
Fabio Biondi - Front-end data architectures in Angular, Redux & NGRX - Codemo...Codemotion The document discusses front-end data architectures using Angular, Redux, and NgRx, emphasizing state management and the separation of business logic from presentation. It introduces key concepts such as actions, reducers, state, and selectors, and compares Redux with alternative state management solutions like Angular Redux, NgXS, and Akita. Additionally, it highlights training opportunities for Italian developers in the field of Angular development.
Do and Don't summary of React Component Lifecycle Methods
Do and Don't summary of React Component Lifecycle MethodsSunil Mishra The document provides Do's and Don'ts for React component lifecycle methods. It discusses the constructor, render, componentDidMount, componentDidUpdate, shouldComponentUpdate, getDerivedStateFromError, and componentDidCatch methods. Key points include: assign initial state in constructor; return valid JS in render; setup subscriptions/requests in componentDidMount; call setState conditionally in componentDidUpdate; remove listeners in shouldComponentUpdate; catch errors and return state in getDerivedStateFromError; log errors in componentDidCatch. The document also provides contact details for the author.
Getting Started with NgRx (Redux) Angular
Getting Started with NgRx (Redux) AngularGustavo Costa This document provides an introduction to NgRx, a library for managing application state in Angular applications using the Redux pattern. It discusses NgRx goals like organizing and managing state, communicating changes, and performance benefits. It also covers Redux principles like single source of truth, pure functions for state changes, and read-only state. The document demonstrates the basic NgRx pattern of actions, reducers, selectors, and effects. It provides examples of setting up NgRx in an Angular application and key NgRx concepts like actions, reducers, selectors, effects, immutable data, and smart/dumb components.
React redux-redux-saga-rahil-memon
React redux-redux-saga-rahil-memonRahilMemon5 Redux is a state container for JavaScript apps that uses a single state tree and reducer functions to update the state in a predictable way. It is inspired by Flux but aims to address some of its shortcomings. The document then discusses the key concepts in Redux including components, the store, reducers, actions, and connecting React components to the store. It also briefly introduces Redux Saga as a middleware library that uses generators to simplify asynchronous logic involving side effects.
Redux essentials
Redux essentialsChandan Kumar Rana The document provides a comprehensive overview of Redux for state management in React applications, covering key differences between local and global state. It discusses Redux architecture, including actions, reducers, and the use of middleware like Redux Saga for managing side effects, as well as best practices for using React with Redux. Additional topics include the utilization of selectors and the Reselect library for optimized state selection, along with tools and recommendations to enhance development efficiency.
Academy PRO: Advanced React Ecosystem. MobX
Academy PRO: Advanced React Ecosystem. MobXBinary Studio MobX is a library that uses functional reactive programming to simplify state management in applications. It uses decorators like @observable, @computed, and @action to transparently observe state changes and automatically update dependent views. MobX ensures state and views remain consistent by deriving all values and automatically running reactions when the source data changes. MobX also includes tools for debugging observable state and integrating with React applications.
Redux workshop
Redux workshopImran Sayed Redux is a state management tool for JavaScript applications that allows for shared state between components and integrates well with React. It utilizes a store, reducers, and actions to manage complex applications while providing developers a better experience with features like middleware for asynchronous actions and capabilities like logging. By using Redux, components can access state directly from a centralized store rather than relying on prop drilling.
Understanding React hooks | Walkingtree Technologies
Understanding React hooks | Walkingtree TechnologiesWalking Tree Technologies The document discusses the services of an IT software and service provider specializing in technology solutions and React application development. It covers the use of React Hooks, their benefits, and best practices for migrating existing applications to use these hooks for better performance and code structure. Additionally, it emphasizes the importance of converting class components to functional components for future flexibility and optimization.
Introduction to Redux.pptx
Introduction to Redux.pptxMohammadImran322154 This document introduces Redux, a state management library for JavaScript apps. It discusses why state management is needed, other approaches like Flux and MobX, and how Redux addresses these issues using principles of single source of truth, immutable state updates via pure functions, and unidirectional data flow. Key aspects of Redux like actions, action creators, reducers, and connecting React components to the store are explained. Considerations for when Redux is a good fit and potential gotchas are also covered.
Why Concurrency is hard ?
Why Concurrency is hard ?Ramith Jayasinghe Here are a few steps I would take to troubleshoot this issue:
1. Generate a thread dump of the application to see the state of all threads. This will show any threads that may be blocked or in an unexpected state.
2. Analyze the thread dump to look for threads that are in a "RUNNABLE" state but not making progress. These could be spinning threads wasting CPU.
3. Check for threads blocked on locks, monitors or other synchronization primitives. These indicate possible deadlocks.
4. Trace the code path for the package management service to see where it may be spinning or blocking unexpectedly.
5. Check application and server logs for any errors or exceptions that could cause blocking
Understanding react hooks
Understanding react hooksSamundra khatri This document provides an overview and explanation of React Hooks. It introduces common Hooks like useState, useEffect, useReducer, and custom hooks. useState is used to add local state to functional components. useEffect is similar to component lifecycle methods and lets you perform side effects. useReducer is an alternative to useState for managing state in a single object. Custom hooks let you extract reusable logic and share it without changing components. The document also includes a FAQ addressing questions about hooks and class components.
Concurrency - Why it's hard ?
Concurrency - Why it's hard ?Ramith Jayasinghe Here are a few steps I would take to analyze the issue:
1. Collect a thread dump of the application to see what threads are currently running and in what state. This will give clues about any threads that may be blocked or spinning.
2. Analyze the thread dump looking for threads that are in a RUNNABLE or BLOCKED state long-term. These could indicate spinning or long waits.
3. Check for threads waiting on locks, semaphores or other synchronization primitives. This could point to a potential deadlock.
4. Trace the code path and logic for threads of interest to understand what they are trying to accomplish and why they may be spinning or blocked.
5. Check
FRONTEND BOOTCAMP 4.pptx
FRONTEND BOOTCAMP 4.pptxEhtesham46 The document summarizes key concepts from a React frontend bootcamp session including performance optimization hooks like useMemo and useCallback, state management in React using local and global approaches, and integrating Redux for global state management. Specifically, it discusses:
1) The useMemo and useCallback hooks can optimize performance by memoizing values and functions to prevent unnecessary re-renders.
2) Local state management uses useState within a component while global approaches like Context API and Redux share state across components.
3) Redux follows a pattern with a central store holding application state, actions describing state changes, and reducer functions defining update logic.
React workshop
React workshopImran Sayed The document introduces React, a JavaScript library for building interactive user interfaces, detailing its features such as the virtual DOM, state management, and component architecture. It outlines the history of React, its component lifecycle, and the differences between state and props, while also addressing advanced concepts like higher-order components and context for state management. The document serves as a foundational guide for understanding and using React effectively across various applications.
an Introduction to Redux
an Introduction to ReduxAmin Ashtiani This document provides an overview of Redux, a predictable state container for JavaScript applications that manages application state in a centralized manner. It discusses the core components of Redux, including stores, actions, and reducers, as well as the challenges of managing shared state in larger applications. Additionally, it outlines different middleware options for handling asynchronous actions and compares the pros and cons of various middleware solutions.
STATE MANAGEMENT IN REACT [Autosaved].pptx
STATE MANAGEMENT IN REACT [Autosaved].pptxsiddheshjadhav919123 The document covers various state management techniques in React, emphasizing the use of hooks like useState and useReducer for managing component and complex state, respectively. It discusses the differences between state and refs, the challenges of prop drilling, and the integration of external libraries like Redux for global state management. Lastly, it provides guidance on when to use different state management strategies based on the nature of the state, such as local, global, or server state.
FRU Kathmandu: Adopting with Change Frontend Architecture and Patterns
FRU Kathmandu: Adopting with Change Frontend Architecture and PatternsLeapfrog Technology Inc. The document discusses the evolution of frontend architecture and patterns in JavaScript, highlighting the shift from imperative code and jQuery to ES6 modules and component-based design. It emphasizes the importance of separation of concerns, service layers for backend communication, and state management libraries like Redux. The conclusion encourages embracing changes in the JavaScript ecosystem while adopting a functional and modular approach with modern frameworks and tools.
Fundamental concepts of react js
Fundamental concepts of react jsStephieJohn This article provides an overview of fundamental concepts of React.js aimed at beginners, emphasizing its role as a front-end JavaScript library for building user interfaces with reusable components. It covers the creation of simple React applications, explaining key topics such as functional and class components, state management, and component lifecycle methods. The document concludes by highlighting the growing popularity of React.js in web app development and encourages readers to contact a development company for assistance.
"The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ...Fwdays The document outlines the challenges and solutions related to UI state management and component reusability, focusing on the 'embrace' library which aims to facilitate type-safe and immutable UI composition. It highlights issues with traditional two-way binding and presents 'embrace' as a solution to manage state and actions effectively while ensuring declarative UI logic. Currently utilized in Grammarly's UI platform, 'embrace' is in development, addressing challenges such as animations and lists and invites contributions from others interested in its evolution.
20 React Interview Questions. Pdf Download
20 React Interview Questions. Pdf DownloadMohd Quasim The document provides a comprehensive guide on the 20 most common React interview questions and answers, aimed at helping developers prepare for interviews in using React. It covers fundamental concepts such as components, state, props, and hooks, as well as advanced topics like the virtual DOM, Redux, and performance optimization. Understanding these questions and their answers can enhance a candidate's confidence and capability to demonstrate React expertise during interviews.
React
ReactAmitai Barnea React is a JavaScript library for building user interfaces. It uses a component-based approach where UI is broken into independent, reusable pieces. The key principles of React include breaking UI into components, unidirectional data flow, identifying UI state, and dispatching actions to change state. React uses JSX syntax which resembles HTML but integrates JavaScript. Components can be "smart" or "dumb", with smart components providing data and dumb components displaying it. Redux is often used with React to manage state in a centralized store using actions and reducers. Debugging tools like React Developer Tools and Redux DevTools help develop React applications.
100 React Interview questions 2024.pptx.pdf
100 React Interview questions 2024.pptx.pdfcodevincent624 React.js is an open-source JavaScript library designed for building user interfaces, particularly single-page applications. Key features include the virtual DOM for performance optimization, a component-based architecture, one-way data binding, and various hooks for managing state and lifecycle events. The document extensively covers React concepts like components, state management, props, hooks, and routing, providing a comprehensive resource for understanding and utilizing React effectively.
React Interview Question PDF By ScholarHat
React Interview Question PDF By ScholarHatScholarhat The document provides a comprehensive guide on over 50 React interview questions and answers to prepare candidates for interviews in React development. It covers various topics including the fundamentals of React, the use of JSX, component states and props, as well as advanced concepts like hooks and lifecycle methods. Additionally, it emphasizes the importance of understanding React's features and common patterns used in front-end development.
React Workshop: Core concepts of react
React Workshop: Core concepts of reactImran Sayed The document outlines the core concepts of React, a JavaScript library for building interactive user interfaces, detailing its key features such as the virtual DOM, component states, props, and lifecycle methods. It also provides a brief history of React's development and explains the differences between class-based and functional components, as well as JSX syntax. Key points emphasize the components' encapsulation of state and props, performance optimizations, and the importance of understanding component lifecycle stages.
Green Custard Friday Talk 21: React Hooks
Green Custard Friday Talk 21: React HooksGreen Custard React introduced Hooks in February 2019 as an alternative to classes for managing state, lifecycles, and context in components. The main Hooks are useState for managing local state, useEffect for lifecycle methods like componentDidMount, and useContext for context. Classes are still supported but Hooks are expected to become the primary way components are defined. There are currently 10 Hooks including additional ones for reducer logic, memoization, callbacks, and more. Hooks allow lifting stateful logic out of classes while preserving their benefits like reuse and composition.
The Road To Redux
The Road To ReduxJeffrey Sanchez This document provides an overview and introduction to React, Redux, and related technologies. It discusses why React is useful, comparisons to other frameworks, an overview of Flux and how Redux differs, concepts like actions, reducers, and stores in Redux, using Immutable.js with Redux, and examples of React and Redux applications. It also touches on ES6 features, useful related modules, resources for learning more, and potential future directions.
React learning in the hard way
React learning in the hard wayChen Feldman The document discusses the author's experiences and challenges in working with React, covering essential concepts like component structure, state vs. props, and the virtual DOM. It highlights best practices for managing state and efficient rendering, along with various component types and tools available in the React ecosystem. Additionally, it provides resources and tips for beginners in React development.
Presentation of the book "Mikado Method"
Presentation of the book "Mikado Method"Jörn Dinkla 1. The Mikado Method is a structured approach to making significant changes to complex code or systems by breaking the changes down into a series of small, incremental experiments and visualizations.
2. It involves setting a goal, making experiments to test dependencies and potential issues, visualizing prerequisites and dependencies, then undoing changes to restore the system before moving forward.
3. The key advantages are learning about the full problem and system through a series of small changes that can be implemented independently, avoiding the need for large feature branches that are risky and complex.
Korrekte nebenläufige Anwendungen mit Koroutinen und TDD
Korrekte nebenläufige Anwendungen mit Koroutinen und TDDJörn Dinkla Jörn Dinkla diskutiert in seiner Präsentation die Implementierung korrekter nebenläufiger Anwendungen mithilfe von Koroutinen und testgetriebener Entwicklung (TDD), um sauberen, wartbaren Code zu gewährleisten. Er betont die Vorteile von TDD wie schnelles Feedback und die Möglichkeit zur Refaktorisierung ohne Stress, und erklärt, wie Koroutinen die Programmierung durch asynchrone Verarbeitung optimieren können. Zudem werden verschiedene Testmethoden und -strategien vorgestellt, um die Testbarkeit und Effizienz im Softwareentwicklungsprozess zu verbessern.
More Related Content
Similar to Plain react, hooks and/or Redux ? (20)
Understanding React hooks | Walkingtree Technologies
Understanding React hooks | Walkingtree TechnologiesWalking Tree Technologies The document discusses the services of an IT software and service provider specializing in technology solutions and React application development. It covers the use of React Hooks, their benefits, and best practices for migrating existing applications to use these hooks for better performance and code structure. Additionally, it emphasizes the importance of converting class components to functional components for future flexibility and optimization.
Introduction to Redux.pptx
Introduction to Redux.pptxMohammadImran322154 This document introduces Redux, a state management library for JavaScript apps. It discusses why state management is needed, other approaches like Flux and MobX, and how Redux addresses these issues using principles of single source of truth, immutable state updates via pure functions, and unidirectional data flow. Key aspects of Redux like actions, action creators, reducers, and connecting React components to the store are explained. Considerations for when Redux is a good fit and potential gotchas are also covered.
Why Concurrency is hard ?
Why Concurrency is hard ?Ramith Jayasinghe Here are a few steps I would take to troubleshoot this issue:
1. Generate a thread dump of the application to see the state of all threads. This will show any threads that may be blocked or in an unexpected state.
2. Analyze the thread dump to look for threads that are in a "RUNNABLE" state but not making progress. These could be spinning threads wasting CPU.
3. Check for threads blocked on locks, monitors or other synchronization primitives. These indicate possible deadlocks.
4. Trace the code path for the package management service to see where it may be spinning or blocking unexpectedly.
5. Check application and server logs for any errors or exceptions that could cause blocking
Understanding react hooks
Understanding react hooksSamundra khatri This document provides an overview and explanation of React Hooks. It introduces common Hooks like useState, useEffect, useReducer, and custom hooks. useState is used to add local state to functional components. useEffect is similar to component lifecycle methods and lets you perform side effects. useReducer is an alternative to useState for managing state in a single object. Custom hooks let you extract reusable logic and share it without changing components. The document also includes a FAQ addressing questions about hooks and class components.
Concurrency - Why it's hard ?
Concurrency - Why it's hard ?Ramith Jayasinghe Here are a few steps I would take to analyze the issue:
1. Collect a thread dump of the application to see what threads are currently running and in what state. This will give clues about any threads that may be blocked or spinning.
2. Analyze the thread dump looking for threads that are in a RUNNABLE or BLOCKED state long-term. These could indicate spinning or long waits.
3. Check for threads waiting on locks, semaphores or other synchronization primitives. This could point to a potential deadlock.
4. Trace the code path and logic for threads of interest to understand what they are trying to accomplish and why they may be spinning or blocked.
5. Check
FRONTEND BOOTCAMP 4.pptx
FRONTEND BOOTCAMP 4.pptxEhtesham46 The document summarizes key concepts from a React frontend bootcamp session including performance optimization hooks like useMemo and useCallback, state management in React using local and global approaches, and integrating Redux for global state management. Specifically, it discusses:
1) The useMemo and useCallback hooks can optimize performance by memoizing values and functions to prevent unnecessary re-renders.
2) Local state management uses useState within a component while global approaches like Context API and Redux share state across components.
3) Redux follows a pattern with a central store holding application state, actions describing state changes, and reducer functions defining update logic.
React workshop
React workshopImran Sayed The document introduces React, a JavaScript library for building interactive user interfaces, detailing its features such as the virtual DOM, state management, and component architecture. It outlines the history of React, its component lifecycle, and the differences between state and props, while also addressing advanced concepts like higher-order components and context for state management. The document serves as a foundational guide for understanding and using React effectively across various applications.
an Introduction to Redux
an Introduction to ReduxAmin Ashtiani This document provides an overview of Redux, a predictable state container for JavaScript applications that manages application state in a centralized manner. It discusses the core components of Redux, including stores, actions, and reducers, as well as the challenges of managing shared state in larger applications. Additionally, it outlines different middleware options for handling asynchronous actions and compares the pros and cons of various middleware solutions.
STATE MANAGEMENT IN REACT [Autosaved].pptx
STATE MANAGEMENT IN REACT [Autosaved].pptxsiddheshjadhav919123 The document covers various state management techniques in React, emphasizing the use of hooks like useState and useReducer for managing component and complex state, respectively. It discusses the differences between state and refs, the challenges of prop drilling, and the integration of external libraries like Redux for global state management. Lastly, it provides guidance on when to use different state management strategies based on the nature of the state, such as local, global, or server state.
FRU Kathmandu: Adopting with Change Frontend Architecture and Patterns
FRU Kathmandu: Adopting with Change Frontend Architecture and PatternsLeapfrog Technology Inc. The document discusses the evolution of frontend architecture and patterns in JavaScript, highlighting the shift from imperative code and jQuery to ES6 modules and component-based design. It emphasizes the importance of separation of concerns, service layers for backend communication, and state management libraries like Redux. The conclusion encourages embracing changes in the JavaScript ecosystem while adopting a functional and modular approach with modern frameworks and tools.
Fundamental concepts of react js
Fundamental concepts of react jsStephieJohn This article provides an overview of fundamental concepts of React.js aimed at beginners, emphasizing its role as a front-end JavaScript library for building user interfaces with reusable components. It covers the creation of simple React applications, explaining key topics such as functional and class components, state management, and component lifecycle methods. The document concludes by highlighting the growing popularity of React.js in web app development and encourages readers to contact a development company for assistance.
"The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ...Fwdays The document outlines the challenges and solutions related to UI state management and component reusability, focusing on the 'embrace' library which aims to facilitate type-safe and immutable UI composition. It highlights issues with traditional two-way binding and presents 'embrace' as a solution to manage state and actions effectively while ensuring declarative UI logic. Currently utilized in Grammarly's UI platform, 'embrace' is in development, addressing challenges such as animations and lists and invites contributions from others interested in its evolution.
20 React Interview Questions. Pdf Download
20 React Interview Questions. Pdf DownloadMohd Quasim The document provides a comprehensive guide on the 20 most common React interview questions and answers, aimed at helping developers prepare for interviews in using React. It covers fundamental concepts such as components, state, props, and hooks, as well as advanced topics like the virtual DOM, Redux, and performance optimization. Understanding these questions and their answers can enhance a candidate's confidence and capability to demonstrate React expertise during interviews.
React
ReactAmitai Barnea React is a JavaScript library for building user interfaces. It uses a component-based approach where UI is broken into independent, reusable pieces. The key principles of React include breaking UI into components, unidirectional data flow, identifying UI state, and dispatching actions to change state. React uses JSX syntax which resembles HTML but integrates JavaScript. Components can be "smart" or "dumb", with smart components providing data and dumb components displaying it. Redux is often used with React to manage state in a centralized store using actions and reducers. Debugging tools like React Developer Tools and Redux DevTools help develop React applications.
100 React Interview questions 2024.pptx.pdf
100 React Interview questions 2024.pptx.pdfcodevincent624 React.js is an open-source JavaScript library designed for building user interfaces, particularly single-page applications. Key features include the virtual DOM for performance optimization, a component-based architecture, one-way data binding, and various hooks for managing state and lifecycle events. The document extensively covers React concepts like components, state management, props, hooks, and routing, providing a comprehensive resource for understanding and utilizing React effectively.
React Interview Question PDF By ScholarHat
React Interview Question PDF By ScholarHatScholarhat The document provides a comprehensive guide on over 50 React interview questions and answers to prepare candidates for interviews in React development. It covers various topics including the fundamentals of React, the use of JSX, component states and props, as well as advanced concepts like hooks and lifecycle methods. Additionally, it emphasizes the importance of understanding React's features and common patterns used in front-end development.
React Workshop: Core concepts of react
React Workshop: Core concepts of reactImran Sayed The document outlines the core concepts of React, a JavaScript library for building interactive user interfaces, detailing its key features such as the virtual DOM, component states, props, and lifecycle methods. It also provides a brief history of React's development and explains the differences between class-based and functional components, as well as JSX syntax. Key points emphasize the components' encapsulation of state and props, performance optimizations, and the importance of understanding component lifecycle stages.
Green Custard Friday Talk 21: React Hooks
Green Custard Friday Talk 21: React HooksGreen Custard React introduced Hooks in February 2019 as an alternative to classes for managing state, lifecycles, and context in components. The main Hooks are useState for managing local state, useEffect for lifecycle methods like componentDidMount, and useContext for context. Classes are still supported but Hooks are expected to become the primary way components are defined. There are currently 10 Hooks including additional ones for reducer logic, memoization, callbacks, and more. Hooks allow lifting stateful logic out of classes while preserving their benefits like reuse and composition.
The Road To Redux
The Road To ReduxJeffrey Sanchez This document provides an overview and introduction to React, Redux, and related technologies. It discusses why React is useful, comparisons to other frameworks, an overview of Flux and how Redux differs, concepts like actions, reducers, and stores in Redux, using Immutable.js with Redux, and examples of React and Redux applications. It also touches on ES6 features, useful related modules, resources for learning more, and potential future directions.
React learning in the hard way
React learning in the hard wayChen Feldman The document discusses the author's experiences and challenges in working with React, covering essential concepts like component structure, state vs. props, and the virtual DOM. It highlights best practices for managing state and efficient rendering, along with various component types and tools available in the React ecosystem. Additionally, it provides resources and tips for beginners in React development.
More from Jörn Dinkla (18)
Presentation of the book "Mikado Method"
Presentation of the book "Mikado Method"Jörn Dinkla 1. The Mikado Method is a structured approach to making significant changes to complex code or systems by breaking the changes down into a series of small, incremental experiments and visualizations.
2. It involves setting a goal, making experiments to test dependencies and potential issues, visualizing prerequisites and dependencies, then undoing changes to restore the system before moving forward.
3. The key advantages are learning about the full problem and system through a series of small changes that can be implemented independently, avoiding the need for large feature branches that are risky and complex.
Korrekte nebenläufige Anwendungen mit Koroutinen und TDD
Korrekte nebenläufige Anwendungen mit Koroutinen und TDDJörn Dinkla Jörn Dinkla diskutiert in seiner Präsentation die Implementierung korrekter nebenläufiger Anwendungen mithilfe von Koroutinen und testgetriebener Entwicklung (TDD), um sauberen, wartbaren Code zu gewährleisten. Er betont die Vorteile von TDD wie schnelles Feedback und die Möglichkeit zur Refaktorisierung ohne Stress, und erklärt, wie Koroutinen die Programmierung durch asynchrone Verarbeitung optimieren können. Zudem werden verschiedene Testmethoden und -strategien vorgestellt, um die Testbarkeit und Effizienz im Softwareentwicklungsprozess zu verbessern.
Nebenlaeufigkeit mit Koroutinen strukturieren
Nebenlaeufigkeit mit Koroutinen strukturierenJörn Dinkla Das Dokument beschreibt die Strukturierung von Nebenläufigkeit mit Koroutinen in Kotlin und betrachtet die evolutionäre Perspektive von Programmiersprachen sowie deren Multithreading-Modelle. Es werden Konzepte wie das Fork-Join-Muster, die Verwendung von Dispatchern und die Implementierung von Kanälen zur Prozesskommunikation erläutert. Abschließend wird auf Best Practices und die Vorzüge von Koroutinen in Bezug auf Wartbarkeit und asynchrone Programmierung eingegangen.
A short introduction to Kotlin
A short introduction to KotlinJörn Dinkla Kotlin is a statically typed programming language that is fully interoperable with Java. It was originally introduced in 2011 and has continued to evolve with new features added in each major release. Some key features of Kotlin include null safety, coroutines for asynchronous programming, and good support for functional programming patterns. Kotlin also aims to reduce boilerplate code through language features like data classes, operator overloading, and built-in support for HTML DSLs.
Concurrency in Kotlin with coroutines
Concurrency in Kotlin with coroutinesJörn Dinkla This document discusses concurrency in Kotlin using coroutines. It provides a brief history of concurrency approaches including threads, futures, and reactive programming. It then introduces coroutines as Kotlin's solution for writing concurrent code in a sequential style using suspending functions and other coroutine primitives like launch, async, and channels. The document demonstrates how coroutines allow writing concurrent code that looks sequential and avoids callbacks through use of coroutines and suspending functions.
Nebenläufigkeit mit Kotlins Koroutinen
Nebenläufigkeit mit Kotlins KoroutinenJörn Dinkla Das Dokument behandelt die Verwendung von Kotlin-Koroutinen zur Handhabung von Nebenläufigkeit in Softwareentwicklungen. Kotlin wird als eine pragmatische und modernere Sprache im Vergleich zu Java und Scala dargestellt, die durch ihre koroutinenbasierten Ansätze eine vereinfachte Entwicklung nebenläufiger Anwendungen ermöglicht. Es werden Konzepte und Vorteile von Koroutinen erläutert, einschließlich deren Integration in bestehende Codebasen sowie Beispiele für deren Anwendung in asynchronen Web-Servern.
GPU-Computing mit CUDA und OpenCL
GPU-Computing mit CUDA und OpenCLJörn Dinkla Das Dokument erläutert die Grundlagen und Anwendungen des GPU-Computings mit CUDA und OpenCL, wobei der Fokus auf der Programmierung, Architektur und Optimierung von parallelisierten Prozessen liegt. Es werden verschiedene Konzepte der Parallelität sowie Unterschiede zwischen CUDA und OpenCL behandelt, einschließlich Hardwarekompatibilität und Performance-Überlegungen. Zudem werden Muster wie SPMD (Single Program Multiple Data) und Optimierungstechniken diskutiert.
Schulung: Einführung in das GPU-Computing mit NVIDIA CUDA
Schulung: Einführung in das GPU-Computing mit NVIDIA CUDAJörn Dinkla Das Dokument bietet eine umfassende Einführung in das GPU-Computing mit CUDA, unterteilt in verschiedene Teile, die die Grundlagen von GPU-Architektur, Programmierungsmuster, Parallelität und die Verwendung von CUDA abdecken. Es beschreibt die Entwicklung und Vorteile von GPU-Computing sowie die Unterschiede zwischen CPU und GPU und gibt praktische Tipps zur Implementierung. Zusätzlich werden die CUDA-Installationsschritte und die Programmierpraktiken für die effektive Nutzung von GPUs thematisiert.
Die ‚komplexe‘ Perspektive - Einführung in die digitale Wirtschaft
Die ‚komplexe‘ Perspektive - Einführung in die digitale WirtschaftJörn Dinkla Inhaltsverzeichnis und Einleitung des Buches "Die ‚komplexe‘ Perspektive - Einführung in die digitale Wirtschaft" von Jörn Dinkla.
Geschäftsmodelle - Ein kurzer Überblick
Geschäftsmodelle - Ein kurzer ÜberblickJörn Dinkla Das Dokument bietet einen umfassenden Überblick über Geschäftsmodelle, deren Struktur und Entwicklung, sowie eine Analyse verschiedener Geschäftsmodellmuster. Es werden Aspekte wie Kundenbeziehungen, Produktionsprozesse und Infrastruktur betrachtet, ergänzt durch Methoden wie das Business Model Canvas und die Blue-Ocean-Strategie. Abschließend wird die Bedeutung von kontinuierlicher Anpassung und Innovation für den Erfolg von Geschäftsmodellen hervorgehoben.
Buchvorstellung "Libertarian Anarchy: Against the State" von Gerard Casey
Buchvorstellung "Libertarian Anarchy: Against the State" von Gerard CaseyJörn Dinkla Gerard Caseys Buch 'Libertarian Anarchy: Against the State' argumentiert, dass der moderne Staat historisch bedingt, funktional unnötig und illegitim ist, indem er behauptet, dass der Mythos der Notwendigkeit des Staates nicht rational zu rechtfertigen ist. Das Dokument beleuchtet die Wurzeln des Staates als eine Institution, die durch Gewalt und Zwang finanziert wird, und stellt verschiedene anarchistische Perspektiven dar, die individuelle Freiheit und den Verzicht auf staatliche Gewalt betonen. Es wird auch eine alternative Sichtweise auf Recht und Ordnung vorgestellt, die ohne staatliche Autorität auskommt und stattdessen auf Gewohnheitsrecht und gesellschaftliche Normen setzt.
Multi-GPU-Computing: Eins, zwei, drei, ganz viele
Multi-GPU-Computing: Eins, zwei, drei, ganz vieleJörn Dinkla Das Dokument behandelt Multi-GPU-Computing, einschließlich der Hardware-Anforderungen, Frameworks und Algorithmen zur Effizienzsteigerung. Es werden Herausforderungen bei der Partitionierung und Kommunikation von Datenstrukturen sowie Best Practices zur Optimierung von Berechnungen behandelt. Zudem werden Erfahrungen und Benchmarks präsentiert, die die Begrenzungen bei der Skalierung durch das PCIe-Bus-System verdeutlichen.
Tipps & Tricks für den erfolgreichen Einsatz von GPU-Computing
Tipps & Tricks für den erfolgreichen Einsatz von GPU-ComputingJörn Dinkla Das Dokument präsentiert Tipps und Tricks für den erfolgreichen Einsatz von GPU-Computing, einschließlich der Konzeption und Optimierung von massiven parallelen Programmen über CUDA und OpenCL. Es behandelt grundlegende Programmierkonzepte, die Strukturierung von Parallelität, sowie Best Practices zur Leistungsoptimierung, insbesondere hinsichtlich Speicherzugriffen und Kernel-Konfigurationen. Zudem wird auf die Herausforderungen und Unterschiede bei verschiedenen GPU-Hardwarekonfigurationen und Programmiersprachen eingegangen.
GPU-Computing mit CUDA und OpenCL in der Praxis
GPU-Computing mit CUDA und OpenCL in der PraxisJörn Dinkla Das Dokument behandelt die Anwendung von GPU-Computing mit CUDA und OpenCL aus einer praktischen Perspektive und beschreibt die Entwicklung von Computer-Grafik sowie die Evolution von Grafik-APIs. Es werden Methoden zur Parallelisierung von Code und die Architektur moderner GPUs erklärt, einschließlich Speichermanagement und Optimierung der Berechnungsdurchsatz- und Speicherbandbreite. Abschließend wird die Entwicklungskompatibilität von Java mit GPU-Computing-Technologien angesprochen, wobei Vor- und Nachteile aufgezeigt werden.
Introduction To Parallel Computing
Introduction To Parallel ComputingJörn Dinkla The document provides an extensive overview of parallel computing, covering its evolution, hardware, software advancements, and the challenges of programming in a multi-core environment. It discusses traditional computing architecture, modern algorithm design, issues with synchronization in shared memory, and strategies for optimizing performance on different hardware setups, including GPUs and FPGAs. Additionally, it emphasizes the importance of computational thinking as a key skill for developing efficient parallel algorithms.
Subversion Schulung
Subversion SchulungJörn Dinkla Das Dokument bietet eine umfassende Schulung zu Subversion, einem Versionsverwaltungssystem, und behandelt seine grundlegenden Konzepte sowie praktische Anwendungen. Es erläutert verschiedene Repository-Modelle, Zugriffskontrollen, die Architektur von Subversion und typische Arbeitsabläufe. Zudem wird auf den historischen Kontext und neue Entwicklungen im Bereich der Versionsverwaltung eingegangen.
Test-Driven-Development mit JUnit 4
Test-Driven-Development mit JUnit 4Jörn Dinkla Das Dokument behandelt die Grundlagen der testgetriebenen Entwicklung (TDD) mit JUnit 4 und vermittelt Kenntnisse über automatisierte Testmethoden sowie deren Bedeutung für die Softwarequalität. Es werden verschiedene Testarten und -methoden, einschließlich Unit-Tests, Integrations- und Systemtests, erläutert, wobei auf die Automatisierung von Tests und die Implementierung in Entwicklungsumgebungen eingegangen wird. Zudem werden die Vorzüge agiler Testmethoden im Vergleich zu traditionellen Ansätzen hervorgehoben.
Ant im Detail
Ant im DetailJörn Dinkla Das Dokument bietet eine umfassende Einführung in das Build-Management mit Apache Ant, einschließlich der Definition von Build-Prozessen, deren Automatisierung und der Integration in verschiedene Entwicklungsumgebungen. Es beschreibt die Funktionen und Möglichkeiten von Ant und vergleicht sie mit anderen Build-Tools wie Maven und Make. Zudem werden wichtige Konzepte wie Aufgaben, Abhängigkeiten und die Struktur von Build-Dateien behandelt.
Ad
Recently uploaded (20)
Decipher SEO Solutions for your startup needs.
Decipher SEO Solutions for your startup needs.mathai2 A solution deck that gives you an idea of how you can use Decipher SEO to target keywords, build authority and generate high ranking content.
With features like images to product you can create a E-commerce pipeline that is optimized to help your store rank.
With integrations with shopify, woocommerce and wordpress theres a seamless way get your content to your website or storefront.
View more at decipherseo.com
Canva Pro Crack Free Download 2025-FREE LATEST
Canva Pro Crack Free Download 2025-FREE LATESTgrete1122g 🌍📱👉COPY & PASTE LINK >> https://click4pc.com/after-verification-click-go-to-download-page/
Canva Pro PC Crack is a practical design app to create beautiful montages and compositions with a lot of resources on the platform.
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarkingarabelatso The pdf version of "CodeCleaner: Mitigating Data Contamination for LLM Benchmarking" presented in Internetware 2025.
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarkingarabelatso The pdf-version of "CodeCleaner: Mitigating Data Contamination for LLM Benchmarking" presented in Internetware 2025.
Zoho Creator Solution for EI by Elsner Technologies.docx
Zoho Creator Solution for EI by Elsner Technologies.docxElsner Technologies Pvt. Ltd. Working with Elsner’s Zoho Creator experts, Educational Initiatives implemented a custom asset management system that: Our Zoho Creator solutions have made real changes across the company, and each team has felt the difference.
Why Edge Computing Matters in Mobile Application Tech.pdf
Why Edge Computing Matters in Mobile Application Tech.pdfIMG Global Infotech This PDF explores the critical role of edge computing in modern mobile application technology. Learn how edge enhances app speed, reduces latency, improves data privacy, and supports real-time performance. Ideal for developers, tech strategists, and mobile innovators looking to stay ahead in the evolving mobile ecosystem.
From Code to Commerce, a Backend Java Developer's Galactic Journey into Ecomm...
From Code to Commerce, a Backend Java Developer's Galactic Journey into Ecomm...Jamie Coleman In a galaxy not so far away, a Java developer advocate embarks on an epic quest into the vast universe of e-commerce. Armed with backend languages and the wisdom of microservice architectures, set out with us to learn the ways of the Force. Navigate the asteroid fields of available tools and platforms; tackle the challenge of integrating location-based technologies into open-source projects; placate the Sith Lords by enabling great customer experiences.
Follow me on this journey from humble Java coder to digital marketplace expert. Through tales of triumph and tribulation, gain valuable insights into conquering the e-commerce frontier - such as the different open-source solutions available - and learn how technology can bring balance to the business Force, large or small. May the code be with you.
Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...
Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...WSO2 Building and operating internal platforms has become increasingly complex — sprawling toolchains, rising costs, and fragmented developer experiences are slowing teams down. It’s time for a new approach.
This slide deck explores modern platform engineering with Choreo, WSO2’s AI-native Internal Developer Platform as a Service. Discover how you can streamline platform operations, empower your developers, and drive faster innovation — all while reducing complexity and cost.
Learn more: https://wso2.com/choreo/platform-engineering/
From Data Preparation to Inference: How Alluxio Speeds Up AI
From Data Preparation to Inference: How Alluxio Speeds Up AIAlluxio, Inc. Alluxio Webinar
June 17, 2025
For more Alluxio Events: https://www.alluxio.io/events/
Speaker:
Jingwen Ouyang (Sr. Product Manager @ Alluxio)
In this talk, Jingwen Ouyang, Senior Product Manager at Alluxio, will share how Alluxio make it easy to share and manage data from any storage to any compute engine in any environment with high performance and low cost for your model training, model inference, and model distribution workload.
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...karishmaduhijod1 Hybridization happens when atomic orbitals mix to form a new atomic orbital.
Heat Treatment Process Automation in India
Heat Treatment Process Automation in IndiaReckers Mechatronics Automate your heat treatment processes for superior precision, consistency, and cost savings. Explore solutions for furnaces, quench systems. Heat treatment is a critical manufacturing process that alters the microstructure and properties of materials, typically metals, to achieve desired characteristics such as hardness, strength, ductility, and wear resistance.
Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factoryMaxim Salnikov Discover how Azure AI Foundry is transforming the way organizations innovate and operate. This session explores the pivotal role of AI in reshaping business processes, enhancing employee experiences, and redefining customer engagement. Attendees will gain insights into the strategic value of AI investments, including the measurable returns and the growing momentum behind generative AI experimentation.
The talk introduces the emerging paradigm of agentic AI - intelligent agents that are revolutionizing how we build, manage, and interact with software. Through real-world examples, the session demonstrates how Azure AI Foundry empowers teams to design, customize, and scale AI applications and agents, unlocking new levels of efficiency and creativity across industries.
Streamlining CI/CD with FME Flow: A Practical Guide
Streamlining CI/CD with FME Flow: A Practical GuideSafe Software Join us as we explore how to deploy a fault-tolerant FME Flow installation using FME Flow’s IaC templates alongside Terraform, AWS, and GitHub in a CI/CD workflow. This session will also cover how to leverage FME’s CI/CD capabilities for FME Flow upgrades and FME object migration between different environments, ensuring seamless automation and scalability.
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI TechIFI Techsolutions Start your cloud journey with IFI Tech—Microsoft’s trusted partner delivering secure, scalable Azure solutions tailored for your business.
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...Muhammad Fahad Bashir This presentation was part of the SQA & PM Bootcamp, where I served as a trainer. It focuses on effective test case design techniques, blending theoretical knowledge with practical application, especially useful for manual testers and QA beginners.
Video Lecture Recording : https://www.facebook.com/share/v/1Z44DiXN5v/
What’s Covered:
🧾 Definition and Purpose of Test Case Design
🚀 Importance of Structured Test Design
🧠 Test Case Design Techniques Overview:
✅ Black Box Techniques
✅ White Box Techniques
✅ Experience-Based Techniques
📝 Manual Test Case Design in Detail
🔐 Real-World Example: Login Page Test Case
🧩 Black Box Methods Explained with Examples:
Equivalence Partitioning (EP)
Boundary Value Analysis (BVA)
Difference Between EP & BVA
📊 Decision Table Testing
💡 Experience-Based Testing: Error Guessing, Exploratory Testing
📂 White Box Techniques (Introductory Overview)
➕ Much More to Help You Build Strong Manual Testing Skills
This resource is especially helpful for students, aspiring QA professionals, and junior testers looking to master test design fundamentals with clarity and practical insight.
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 20252nd Sight Lab This presentation is similar to another presentation I gave earlier in the year at the AWS Community Security Day, except that I had less time to present and incorporated some AI slides into the presentation. In this presentation I explain what batch jobs are, how to use them, and that AI Agents are essentially batch jobs. All the same security controls that apply to batch jobs also apply to AI agents. In addition, we have more concerns with AI agents because AI is based on a statistical model. That means that depending on where and how AI is used we lose some of the reliability that we would get from a traditional batch job. That needs to be taken into consideration when selecting how and when to use AI Agents as batch jobs and whether we should use AI to trigger an Agent. As I mention on one side - I don't want you to predict what my bank statement should look like. I want it to be right! By looking at various data breaches we can determine how those attacks worked and whether the system we are building is susceptible to a similar attack or not.
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarkingarabelatso This is the pdf-version slides for the presentation "CodeCleaner: Mitigating Data Contamination for LLM Benchmarking" in Internetware 2025.
Humans vs AI Call Agents - Qcall.ai's Special Report
Humans vs AI Call Agents - Qcall.ai's Special ReportUdit Goenka Humans vs Agentic AI Cost Comparison: Cut 85% Support Costs
TL;DR: Agentic AI crushes human costs in L1/L2 support with 85% savings, 300% efficiency gains, and 90%+ success rates.
Your CFO just asked: "Why spend $2.3M annually on L1 support when competitors automated 80% for under $200K?" The humans vs agentic AI cost debate isn't theoretical - it's happening now.
Real Cost Breakdown:
- India L1/L2 Agent: ₹6,64,379 ($8,000) annually (full cost)
- US L1/L2 Agent: $70,000 annually (loaded cost)
- Qcall.ai Agentic AI: ₹6/min ($0.07/min) = 85% savings
Game-Changing Results:
- 47 human agents → 8 agents + AI system
- Operating costs: $2.8M → $420K (85% reduction)
- Customer satisfaction: 78% → 91%
- First call resolution: 72% → 94%
- Languages: 2-3 → 15+ fluently
Why Agentic AI Wins:
- Human Limitations: 8hrs/day, 1-2 languages, 30-45% attrition, mood-dependent, 6-12 weeks training
- Qcall.ai Advantages: 24/7 availability, 97% humanized voice, <60 second response, intelligent qualification, seamless handoff
Industry Impact:
- E-commerce: 82% cost reduction
- Healthcare: 90% appointment automation
- SaaS: 23% satisfaction improvement
- Financial: 95% inquiry automation
Implementation:
- Setup: 2-5 days vs 6-12 weeks hiring
- ROI: Break-even in 3 months
- Scaling: Instant global expansion
Competitive Gap:
- Early Adopters: 85% cost advantage, superior metrics, faster expansion
Late Adopters: Higher costs, limited scalability, compounding disadvantage
Similar automation patterns emerge across industries.
Marketing teams use autoposting.ai for social media automation - same human-AI collaboration model driving L1/L2 transformation.
"We reduced support costs by 78% while improving satisfaction by 31%. ROI was immediate and keeps compounding." - COO, Global SaaS Company
Getting Started:
Calculate current L1/L2 costs
Assess repetitive tasks
Request Qcall.ai demo
Plan 20% pilot
Bottom Line: Companies avoiding this shift hemorrhage millions while competitors scale globally with fraction of costs. The question isn't whether agentic AI will replace routine tasks - it's whether you'll implement before competitors gain insurmountable advantage.
Ready to transform operations? This reveals complete cost analysis, implementation strategy, and competitive advantages.
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FMESafe Software Data warehouses are often considered the backbone of data-driven decision-making. However, traditional implementations can struggle to meet the iterative and dynamic demands of GIS operations, particularly for Iterative Cross-Division Data Integration (ICDI) processes. At WVDOT, we faced this challenge head-on by designing a Geospatial Data Warehouse (GDW) tailored to the needs of GIS. In this talk, we’ll share how WVDOT developed a metadata-driven, SESSI-based (Simplicity, Expandability, Spatiotemporality, Scalability, Inclusivity) GDW that transforms how we manage and leverage spatial data. Key highlights include: - Simplifying data management with a lean schema structure. - Supporting ad hoc source data variations using JSON for flexibility. - Scaling for performance with RDBMS partitioning and materialized views. - Empowering users with FME Flow-based self-service metadata tools.We’ll showcase real-world use cases, such as pavement condition data and LRS-based reporting, and discuss how this approach is elevating GIS as an integrative framework across divisions. Attendees will walk away with actionable insights on designing GIS-centric data systems that combine the best of GIS and data warehouse methodologies.
Simplify Task, Team, and Project Management with Orangescrum Work
Simplify Task, Team, and Project Management with Orangescrum WorkOrangescrum Streamline project workflows, team collaboration, and time tracking with orangescrum work, your all-in-one tool for smarter and faster project execution.
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...Muhammad Fahad Bashir
Ad
Plain react, hooks and/or Redux ?
- 1. GLOBAL SOFTWARE CONSULTANCY Plain React, Hooks and/or Redux? Jörn Dinkla, [email protected] 1 © 2020 ThoughtWorks
- 2. “... we encourage the use of vanilla React until you experience enough pain points to justify bringing in Redux” Marc Garreau and Will Faurot, Authors of “Redux in Action” 2 © 2020 ThoughtWorks
- 3. Plain React ● Passing state as props ○ Large property lists ○ Unclear if data is really needed or just passed through ● Duplicate versions of data ○ What to update? ○ No single point of truth ● Original data vs. derived data is difficult to distinguish ○ E.g. from the database? Or from the FE? ○ (*) If we have to manipulate data in the FE is it BFF? BFW? The pain points 3
- 4. State management ● One of the biggest problem of writing correct code ○ Without state you do not need context to understand code ○ With state you have to simulate the code and context to understand it ● Pure functional programming as remedy ● Or at least ○ state should be minimized ○ … and kept as local as possible Problems with state 4 © 2019 ThoughtWorks
- 5. 5 Plain react Local state with React.Component
- 6. 6 Plain react Advantages ● Easy to learn ● Feels natural to OO developers Disadvantages ● State is local, so has to be passed around (incl. getters/setters) ● Separation into presentation and container components is not enforced ● Tight coupling, if state manipulation is not a separate function ● Can be difficult to test and debug, no “replayability” ● State is decentralized, no overview Using local state with React.Component
- 8. Hooks ● const [getter, setter] = useState(initialValue) ● useEffect( () => fetch()..., [deps]) ○ Replaces componentDidMount, componentDidUpdate, and componentWillUnmount ○ Can return cleanup function ● const ctx = createContext(); … useContext(ctx) ● useReducer() Restriction: top level of React FunctionComponents Using local state with React.FunctionComponent 8
- 9. 9 Hooks Using local state with React.FunctionComponent
- 10. Advertisement from the React webpage From https://reactjs.org/docs/hooks-intro.html#motivation ● “Hooks allow you to reuse stateful logic without changing your component hierarchy” ● “Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)” ● “Hooks let you use more of React’s features without classes” ● “Classes confuse both people and machines” IMHO “very optimistic” 10
- 11. 11 Hooks Advantages ● Easy to learn ● “Hooks are a way to reuse stateful logic, not state itself.” [1] Disadvantages ● State may still be local (when no context is used), so still has to be passed around ● Tight coupling, can be difficult to test, if not in separate functions Using local state with React.FunctionComponent [1] https://reactjs.org/docs/hooks-overview.html
- 12. 12 Redux Separation of concerns A functional approach to state
- 13. 13
- 14. 14 Coupling between React and Redux
- 15. Good debugging support Time travel included 15 © 2019 ThoughtWorks
- 16. 16 Redux A functional approach to state
- 17. Redux and testing ● Pure functions are easy to test ○ f(Input) = Output ● Stateful functions are more difficult to test ○ f(Input, State) = (Output, newState) ● [Stateful functions running concurrently are very difficult to test] ● Redux enforces functional programming with state ○ side effects only at certain defined places: action creators and middleware ● => So easy to test 17
- 18. 18 Redux Advantages ● Enforces separation of concerns ● Enforces explicit definitions (actions as types) ● Enforces Isolated points of state manipulation (reducers) ● Enforced structure improves testability ● Abstract executable model of your app without the view (store + actions) ● Not exclusive, hooks and local state may still be used Disadvantages ● “Boilerplate” aka everything has to be defined explicitly ● Learning for devs A functional approach to state
- 20. Proposal 20 ● Data with larger scope: ○ Use redux for the “backbone” of the data with larger scope ○ Reuse mapStateToProps/mapDispatchToProps ● Data with local scope ○ Use hooks ○ E.g. indices for dropdowns, temporary changes