How to Use Redux to Manage State

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • cra-template-redux

    Discontinued ARCHIVED: the CRA+JS template has moved to https://github.com/reduxjs/redux-templates

  • The patterns shown in this tutorial are outdated and not what we currently recommend. "Modern Redux" code is very different than what this and other older tutorials show. We've introduced newer APIs like Redux Toolkit, which is a set of utilities that provide a light abstraction to simplify the most common Redux tasks, and the React-Redux hooks API, which is generally easier to use than the traditional connect API.

    I strongly recommend reading through the newly rewritten official tutorials in the Redux docs, which have been specifically designed to teach you how Redux works and show our recommended practices:

    - "Redux Essentials" tutorial [0]: teaches "how to use Redux, the right way", by building a real-world app using Redux Toolkit

    - "Redux Fundamentals" tutorial [1]: teaches "how Redux works, from the bottom up", by showing how to write Redux code by hand and why standard usage patterns exist, and how Redux Toolkit simplifies those patterns

    The older patterns shown in almost all other tutorials on the internet are still valid, but not how we recommend writing Redux code today.

    You should also read through the Redux "Style Guide" docs page [2], which explains our recommended patterns and best practices. Following those will result in better and more maintainable Redux apps.

    In addition, the easiest way to start a new project is with the official Redux+JS template for Create-React-App [3]. It comes with Redux Toolkit and the React-Redux hooks API already set up when the project is created.

    [0] https://redux.js.org/tutorials/essentials/part-1-overview-co...

    [1] https://redux.js.org/tutorials/fundamentals/part-1-overview

    [2] https://redux.js.org/style-guide/style-guide

    [3] https://github.com/reduxjs/cra-template-redux

  • redux

    A JS library for predictable global state management

  • > From what I gather, your ask is to add information about the usage of the toolkit and steer people towards that. Is that correct? If so, I don't mind adding it, but I think the existing information is helpful.

    Basically, yes. The point is we want people to know that writing object spreads and action constants by hand is _not_ how they're supposed to really write Redux today, and that RTK both exists and is the standard approach for writing Redux logic.

    Per the "Quick Start/Getting Started" page: the point of that page is not to teach Redux or RTK. It's just the simplest possible example to show what the syntax looks like. _Learning_ this material is why we have the extensive "Essentials" and "Fundamentals" tutorials. Frankly, if having those snippets in the "Getting Started" page is confusing, I'd rather _remove_ those snippets and point more emphatically over to the tutorials.

    > you're not really learning Redux, you're learning the abstraction that's built on top of Redux

    Yes, and that's also the point. RTK _is_ now "Redux". Or rather, it's the form of Redux we want people to learn. Yes, it _is_ a set of abstractions, and some people may find it easier to learn if they understand the underlying principles and techniques first. That's why the "Fundamentals" tutorial exists. But, many other people just want to dive straight into writing working code and see "how to use it". That's why we have the "Essentials" tutorial, and there's been very positive feedback from people who _only_ read the "Essentials" tutorial to start learning Redux. (We've actually considered just replacing the NPM `redux` package with the RTK contents, but concluded that would be too much ecosystem churn: https://github.com/reduxjs/redux/issues/3321 ).

    It is admittedly hard to split the learning material between our three docs sites: the Redux core docs, the Redux Toolkit docs, and the React-Redux docs. That's why I actually just deleted the tutorials in the RTK site itself recently, and instead now point to the "Essentials" and "Fundamentals" tutorials in the core site instead, so that there's no duplication of tutorial content. (There were several other issues with the RTK tutorials people had complained about anyway - see https://github.com/reduxjs/redux-toolkit/issues/371 ).

    FWIW, this is a really good discussion and set of feedback, and I appreciate you engaging with me on this :)

    If you still have concerns about how we're trying to teach Redux and RTK, could you do me a favor and file a new "Discussion" in the Redux core repo, at https://github.com/reduxjs/redux/discussions ? I definitely take concerns over Redux learning flow seriously and am interested in ways we can improve the docs, and this HN thread probably isn't the best place for surfacing the discussion :)

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts