The article revisits Undux, the minimalist state‑management library created by Anthropic’s Claude Code founder Boris Cherny out of frustration with Redux, examines its type‑safe, no‑boilerplate API, compares code snippets with Redux’s workflow, and reflects on its legacy and lessons for modern React development.
This article explains Redux's core concepts—Action, Reducer, Store—and demonstrates how to implement them manually before transitioning to the Redux Toolkit (RTK), highlighting the synergy between low‑level principles and efficient modern development tools for large React applications.
This guide explains React state management fundamentals, covering local state with useState, useReducer, class components, and custom hooks; global solutions such as Context API, Zustand, Jotai, and Redux; and server‑side handling using React Query, SWR, plus navigation and form state best practices.
This article describes how to create a feature‑rich, extensible React admin panel by implementing a convention‑based routing system, unified navigation with menu and draggable tabs, a Redux‑centric state management strategy, and a modular plugin architecture, while also integrating MUI, Next.js, and AI‑assisted code generation.
Explore seven core methods for React component communication—including Props, State Lifting, Context, Refs, Hooks, Event Emitters, and Redux—detailing practical code examples, key considerations, and best practices to help developers choose the optimal approach for various application scenarios.
The article describes how a monolithic supply‑chain front‑end was refactored into a micro‑frontend architecture based on Single‑SPA, detailing the background problems, requirements, technical selection, system design, service discovery, module loading, message bus, data sharing, build and deployment, and the resulting performance improvements.
This article demonstrates how to use the ComposeHooks library to create Redux‑like global state stores, expose them via ReduxProvider, and handle network request lifecycles—including loading, success, and error—through useSelector, useDispatchAsync, and a custom useFetch helper in Jetpack Compose.
This article explains how DataWind’s frontend team replaced the outdated Dva‑based data flow with a new Redux‑plus‑hook solution called HookStore, detailing the pain points of complex initialization, legacy async syntax, tight module coupling, and showing migration steps, code examples, and benefits such as multi‑instance support and OpenAPI decoupling.
This guide walks through creating a React Todo List app with Rematch, showing how to define typed models, initialize a Redux‑compatible store, provide it via React‑Redux, and use useSelector and typed useDispatch in components, highlighting Rematch’s concise syntax and similarity to Redux‑Toolkit.
This guide walks through creating a React Todo List app with Redux by installing the libraries, defining TypeScript state and actions for adding and deleting items, implementing an immutable reducer, configuring a store, wrapping the root with Provider, and connecting UI components to dispatch and display the todo array, illustrating the full Redux workflow and its debugging advantages.
This article explains the core concepts of Domain‑Driven Design, distinguishes its strategic and tactical patterns, and shows how Redux implements similar ideas such as queries, commands, domain events, and aggregates, while also discussing event sourcing, CQRS, and code examples for decoupling.
This article explains Redux middleware concepts, including its role in intercepting actions, implementation via applyMiddleware and compose, usage patterns, and how to create custom middleware, with code examples illustrating core principles in JavaScript applications.
This article explains the concept of currying in JavaScript, demonstrates its benefits for reducing parameter repetition and improving code maintainability, and shows practical implementations including manual currying, utility functions, and applications in Redux middleware and function composition.
This article explains how to synchronize state across distant React components without relying on heavy libraries, using a custom hook and a publish‑subscribe model, and discusses optimizations such as avoiding redundant updates and incorporating a simple reducer for efficient change detection.
This article examines the core challenges that global state‑management libraries must address in modern React applications, reviews the evolution from early solutions like Redux to newer atom‑based and remote‑state tools, and offers guidance on selecting the most suitable library for a given project.
State management in Flutter involves understanding different state types—ephemeral and application—using stateful and stateless widgets, and selecting appropriate frameworks such as Provider, Redux, GetX, and others, each with distinct advantages, drawbacks, and usage patterns to efficiently handle UI updates and data sharing across components.
This article provides an in‑depth tutorial on implementing server‑side rendering (SSR) for React applications, covering basic concepts, Koa server setup, ReactDOMServer APIs, routing with react‑router, Redux state hydration, CSS handling, performance optimizations, and modern SSR frameworks such as Next.js and Umi.
This article explains Redux’s core concepts, demonstrates how to implement a basic createStore function in JavaScript, and shows how to integrate it with React using a custom Provider and connect higher‑order component for state sharing across components.
State management, the core of frontend development, involves defining state as data changes, handling asynchronous pre‑state logic, and linking post‑state updates to view rendering, with implementations ranging from framework APIs like React’s setState to reactive proxies in Vue and global stores such as Redux, MobX, and Vuex.
This article reviews the evolution of React state‑management solutions, comparing classic Redux with modern Hook‑based libraries such as Unstated‑Next, Constate, Zustand, Jotai and Valtio, explains core concepts like algebraic effects, context duplication, and provides practical code examples and performance tips.
This article explains the concept of data flow, compares three major front‑end state‑management approaches—Redux, MobX, and RxJS—introduces Recoil, and discusses an ideal source‑data programming model for building maintainable, reactive user interfaces.
This article explains what immutable data structures are, outlines their advantages such as reduced complexity, memory savings, easy state rollback, and functional programming benefits, and demonstrates practical usage of Immutable.js in React components and Redux integration with code examples and best‑practice tips.
This article details how a video editing page built entirely with Flutter and Redux can overcome state, logic, UI, and performance complexities through architectural decisions, time‑range handling, stack‑based rendering, thumbnail caching, and frame‑rate optimizations to achieve native‑level performance on mainstream devices.
This article introduces Kaiyan Kuaichuang's Flutter‑based cross‑platform architecture, covering component layering, state‑management strategies (BLoC, Provider, Redux, Built_redux), data communication via gRPC/ProtoBuf, and a custom URL‑based routing solution, while sharing practical code snippets and lessons learned.
This article explores how Kuaishou Creative leverages Flutter for cross‑platform development, detailing its componentized architecture, page‑level and inter‑page state management approaches, data and page communication mechanisms, and the custom routing solution that unifies navigation across the app.
This article explains what Dva is, the problems it solves, its advantages and disadvantages, core concepts, minimal application structure with code examples, and the underlying implementation details, comparing it with React, React‑Redux, and Redux‑Saga, helping developers understand its role in frontend development.
This article explains the origins of Recoil, why existing tools like Redux, React's built‑in state, and Context fall short for complex shared and derived state scenarios, and how Recoil's atom‑selector architecture, including async selectors and application‑level state observation, addresses flexibility, performance, and robustness in modern React applications.
Linke is a decoupled component framework for Xianyu’s frontend that separates UI (View) from business logic (Store) through a clear Interface, adopts MobX for lightweight state management, and thereby boosts code reuse, standardizes development, and cuts maintenance overhead across multiple projects.
The article compares traditional React state‑management solutions—Redux’s single‑store with extra libraries and potential re‑renders, and MobX’s fine‑grained but class‑based approach—against the lightweight, hook‑driven Clean‑State library, which avoids providers, reduces bundle size, and offers precise module‑level updates for large and consumer applications.
This article explains how state management in the React ecosystem has progressed from simple parent‑child props communication to using Redux, then Redux‑Saga, and finally the DVA framework, highlighting the benefits and practical code examples for each stage, especially in commercial real‑estate projects.
This article explains the essence of frontend development as view‑reaction to events, compares reactive programming with MVVM and Redux, demonstrates a complete RxJS implementation for a news app, and shows how the same data‑flow concepts extend to real‑time computing with Apache Flink.
This article explains Redux’s simple yet powerful state‑management model, its three core principles, key concepts such as actions, reducers, and store, and demonstrates how to integrate Redux with React using react‑redux’s Provider and connect APIs with practical code examples.
This article outlines the evolution of our wireless frontend architecture from a legacy Backbone.js and ASP.NET stack to a modern Node.js/React-IMVC solution, discusses the challenges of size, tooling, and cross‑platform development, and presents our shift to a Model‑Oriented Pure‑Model framework with Monorepo and GraphQL‑BFF integration.
This article shares a front‑end engineer's experience building the Flash intelligent content creation platform, covering the evolution of its video module, component‑based architecture with React, drag‑and‑drop implementation, state management using Redux, and build‑time optimizations such as code splitting and lazy loading.
This article details JD's PLUS team experience of replacing H5 pages with Flutter, covering why Flutter was chosen, migration costs, H5/Native interaction, debugging, downgrade strategies, integration workflow, MVVM‑Redux architecture, performance comparison, and future directions.
magpie_log is an open‑source, Flutter‑based cross‑platform visual event‑tracking solution that replaces manual, tightly coupled instrumentation by providing automated, parameterized, visualizable logging through Redux action interception, Navigator hooks, setState interception, and manual APIs, with configurable reporting and seamless integration for both pure Flutter and hybrid apps.
Redux is a predictable JavaScript state container that centralizes a single immutable store, updates it via dispatched actions processed by pure reducers, combines multiple reducers, supports middleware and DevTools, and can be built from scratch by implementing a createStore function with subscribe, getState, and dispatch.
This article explains the middleware design pattern in JavaScript, illustrating recursive and chainable implementations with Koa and Redux, and explores techniques such as function composition, reduceRight, parameter passing, and the role of currying and closures.
This tutorial shows how to convert a traditional class‑based Redux component into a modern functional component using React hooks, covering refactoring to a function component, reading state with useSelector, dispatching actions with useDispatch, and providing complete code examples.
Facing rapid growth and the need to support dozens of OTT platforms, Tubi’s frontend team redesigned its web player into an independent, TypeScript‑driven module with a clear Adapter‑Player‑Action‑Reducer architecture, monorepo management, comprehensive testing and documentation, enabling higher code quality and a better cross‑platform playback experience.
This article walks through the concepts, architecture, and step‑by‑step implementation of a React + Redux isomorphic application that renders on the server with Koa, bundles with Webpack, and hydrates on the client, while highlighting performance benefits and common pitfalls.
The UI2CODE Page Framework evolves a unified, MVP‑based architecture—comprising Pages, Cards, and Reactions—that leverages AI‑driven code generation and Redux messaging to enable high‑cohesion, low‑coupling components, dramatically cut development time, and plans further AI integration for fully automatic page creation.
This article explains why Redux is useful for large React applications, categorizes typical state types, and presents practical patterns—including UI‑driven structures, direct API mapping, and normalized entities—along with code samples and loading‑state management techniques to build maintainable front‑end codebases.
This article explains why data flow management is crucial in React, reviews React's built‑in state handling, and compares three popular third‑party solutions—Redux, MobX, and RxJS—highlighting their concepts, strengths, weaknesses, and suitable scenarios for use.
This article examines the drawbacks of maintaining separate native codebases for iOS and Android, reviews the evolution of cross‑platform solutions such as WebView‑based frameworks, React Native, and Flutter, and shares practical insights, code examples, and future plans for using Flutter in large‑scale mobile projects.
This article introduces React Native Debugger, explains how to install it on macOS, demonstrates its powerful debugging features for React components, Redux state, and network requests, and provides configuration tips and code examples to help developers efficiently troubleshoot RN applications.
This article explains Redux’s role in managing complex React state, covering its core concepts such as the single store, immutable state tree, actions, action creators, reducers, middleware, and integration with React via Provider and connect, illustrated with diagrams and practical examples.
At the inaugural Android Green Alliance Conference in Beijing, Xianyu engineer Ji Feng presented a deep‑dive on using Flutter to build efficient cross‑platform applications, covering its unified programming model, performance gains, solutions to memory, font, caching, ArmV7, video, CI, hybrid stack challenges, and introducing a novel Redux‑based Half‑Dumb Component architecture.
This article details a front‑end engineer's experience building a hotel mini‑program with the DACE framework—covering its React‑based SSR architecture, module organization, data fetching strategies, custom components, webpack code‑splitting, and the challenges and insights gained during development, integration, and deployment.
This article shares the Yueqi Reading team's three‑month journey of building a large‑scale React Native app, covering business background, technology selection, navigation management, state persistence, performance tuning, release automation, error monitoring, common pitfalls, and practical tips for mobile developers.
The article explains how Flutter adopts a React‑style reactive architecture—using immutable widgets, InheritedWidget for communication, Dart Streams and a Redux‑like store with reducers and interrupters—to achieve clear model‑view separation, fine‑grained UI updates, componentized multi‑store widgets, and shares Xianyu’s practical implementation details and code examples.
RxJS brings the Observable pattern to JavaScript, enabling asynchronous multiple-value streams that combine observer, iterator, and functional concepts, and the article shows how to use it in React and Redux for clean subscription management, data aggregation, advanced async handling, and time‑based operations.
The article contrasts push‑based reactive programming with imperative code, then walks through a simple EventEmitter with manual cleanup, examines Redux’s store subscriptions and middleware overhead, explores Mobx’s automatic dependency tracking via getters, setters and autorun, and compares the boilerplate, performance, and hidden‑dependency trade‑offs before previewing a future post on using Observables for asynchronous events.
This weekly newsletter curates nine insightful articles covering Google’s Guess.js toolkit, I/O 2018 web highlights, front‑end AR techniques, Chrome’s autoplay restrictions, a deep dive into Redux, WebAssembly versus JavaScript performance, comprehensive CSS line‑break methods, ten common software architecture patterns, and guidance on front‑end engineer career advancement.
This article walks through creating a React application without scaffolding tools, detailing the project directory layout, chosen tech stack—including React, Redux, Immutable.js, redux‑saga, and axios—along with development utilities like redux‑devtools and Reactotron, component organization, routing strategies, state persistence, and asynchronous task management.
This article walks through creating a React application without scaffolding tools, detailing project directory layout, chosen technology stack—including React, Redux, Immutable.js, react-router, redux-saga, and related debugging and persistence utilities—while explaining component design, middleware, enhancers, routing, and asynchronous task management.
This article shares practical strategies for designing, dividing, and managing React components in a large‑scale CRM system, covering component hierarchy, state and props handling, data communication, common pitfalls, and best practices to improve maintainability and performance.
This article explains the differences between WeChat Mini Programs and H5, details the custom runtime environment, demonstrates performance differences, shows how to wrap callback‑based APIs with Promises, introduces component‑based development, and integrates Redux for state management with code examples.
This article presents a comprehensive case study of building a front‑end business framework for a mobile e‑commerce app, covering the initial design thinking, technical selection, architecture (infrastructure, router, MVC), componentization, hybrid performance optimizations, server‑side rendering, SPA‑React integration, Redux usage, and the engineering workflow including automation, testing, and continuous integration.
By using abstraction to model common concepts and composition to build complex behavior from simple, pure‑function building blocks like map, filter, and reduce, the article shows how functional programming techniques underpin Redux and React, providing a systematic way to tame front‑end software complexity.
Redux is a JavaScript state container that enforces a single‑store, unidirectional data flow using actions, reducers and middleware, drawing on Flux, CQRS and event sourcing, and the article examines its core source files while offering best‑practice guidelines such as immutability, pure reducers, smart‑dumb component separation, and careful middleware use.
This article explains how React renders views, introduces Flux as a unified state‑management architecture, and compares Redux's single‑store, reducer‑based approach, highlighting their core components, data flow, and practical differences for modern frontend development.
After a year of developing with React Native, this guide shares eleven frequent pitfalls—from misguided project planning and layout handling to Redux store design, component structuring, inline styling, and gesture handling—offering practical advice to help developers build more robust mobile applications.
This article explains how Twitter Lite, one of the world’s largest React.js PWAs, eliminates a range of performance bottlenecks through route‑based code splitting, avoiding frame‑dropping functions, using smaller images, optimizing React lifecycle methods, improving Redux updates, and leveraging Service Workers for faster asset delivery.
This guide walks you through building a complete React isomorphic server‑side rendering environment—from understanding SSR benefits and core principles to configuring routing, state management, static asset handling, code splitting, optimization, and deployment—providing practical code snippets, diagrams, and best‑practice recommendations.
This article details the transformation of the HULK private‑cloud platform's front‑end from a PHP‑based MVC system to a modern React SPA using webpack, Redux, SASS and code‑splitting, highlighting the motivations, architectural decisions, and performance benefits of the 3.0 overhaul.
This article explains how to transition from traditional MVC architecture to Redux when building a React‑Native mobile app, detailing the analogies between actions, reducers, stores, and components, and provides step‑by‑step code examples for implementing state management in JavaScript.
This article explains what middleware is, how Redux adopts the middleware pattern, demonstrates the flow of actions with and without middleware, shows how to implement custom middleware including logging and async handling, and presents the official applyMiddleware implementation with code examples.
This article explains Redux’s fundamental ideas—including the store, dispatch, subscribe, actions, reducers, and compose—while comparing it to Flux, illustrating code snippets, and preparing readers for the upcoming middleware discussion, all aimed at front‑end developers seeking a clear grasp of the data‑flow framework.
This article explains the core principles of Redux, when to adopt or avoid it, and provides a detailed walkthrough of its architecture, key components, and practical integration with React, including store creation, reducers, actions, middleware, and project structure.
This article explains the fundamentals of React and Redux, compares them to traditional tools like jQuery, highlights their combined benefits for clean state management, and describes Hulu’s ongoing migration to this modern frontend stack.
This article reviews four common approaches—Root Component, Container Component, Redux Async Actions, and Relay—for handling AJAX requests in React, explains when each method is appropriate, and warns against two anti‑patterns, helping developers choose the most suitable strategy for their project's size and architecture.
This article explains the various relationships between React components—parent‑child, sibling, and deeper hierarchies—and demonstrates how to handle communication using props, callback functions, the spread operator, an observer pattern, and state‑management libraries like Flux and Redux.
This article introduces a Webpack2‑based React‑Redux boilerplate, detailing its architecture, core features, configuration options, development workflow, server‑side rendering support, and best‑practice recommendations, while providing code examples and guidance for both beginners and experienced frontend developers.
This article shares the experience of a Qunar hotel team refactoring their hotel homepage with React Native, detailing the initial native‑style approach, challenges with Redux, robustness and animation performance, and the subsequent architectural redesign that improved maintainability and user experience.
This article surveys a decade of GUI architectural evolution, comparing classic MVC, MVP, and MVVM with modern unidirectional approaches such as Flux and Redux, and discusses how these patterns apply across web, Android, and iOS platforms while highlighting responsibilities, testability, and state management.
This article recounts the Qunar hotel team's experience refactoring a hotel page using React Native, detailing the initial native‑mindset pitfalls, robustness and animation issues, and how adopting a more React‑centric architecture with Redux, connect, and native animation APIs dramatically improved performance, maintainability, and developer experience.
feWorkflow replaces the original gulp‑ui by leveraging Electron to run a bundled gulpfile, while React, Redux, and Immutable.js provide a modern UI and state management, and Webpack compiles ES6 code; the article details the architecture, setup, key features, and code examples for this desktop workflow tool.
React provides component‑based UI rendering with state‑driven updates, while Flux introduces a unidirectional data flow using stores, dispatchers, and actions to manage state changes, and Redux refines this model by consolidating a single store and pure reducer functions for predictable state management.
This article shares practical React performance‑optimization techniques—such as using the Virtual DOM wisely, integrating Immutable.js, fine‑tuning shouldComponentUpdate, and applying code‑splitting and Redux data management—to dramatically improve first‑paint time and interaction smoothness on mobile web applications.
This article details the challenges and solutions encountered while refactoring the HandQ school‑group web app with React, covering React's core features, performance pitfalls, the use of Immutable.js and pure‑render decorators, build‑tool choices, and concrete optimization tips that yielded measurable speed gains.
The article details how to set up isomorphic ReactJS server‑side rendering using ReactDOMServer, Redux for shared state, and React Router for universal routing, covering data fetching, Webpack builds for client and Node, code‑splitting, and performance trade‑offs such as CPU overhead and caching strategies.
This article presents a detailed case study of a mobile‑first single‑page web application built with React.js, Redux, React‑router, and a custom Node.js framework, describing the technology selection, development workflow, encountered challenges, and the advantages and drawbacks of the chosen stack.
