reselect
redux
Our great sponsors
reselect | redux | |
---|---|---|
29 | 173 | |
18,598 | 58,010 | |
0.3% | 0.4% | |
8.5 | 9.0 | |
15 days ago | 18 days ago | |
TypeScript | TypeScript | |
MIT License | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
reselect
-
The complex React/Redux app that I don't hate
Each one of those method calls represents a potentially huge tree of nested method calls. And if we've implemented memoization, it would all run in O(n), where n is the total number of methods. There is no performance impact from the nested calls and we're guaranteed to respect all business rules at every level (DRY), while keeping each method easily readable. reselect is a perfectly good library that provides composability and memoization.
-
Coming from Java, I don’t think I ever understood the phrase “enough rope to shoot yourself in the foot” until I saw some of the super-complicated types people can make in Typescript.
But we needed this in Reselect because it has an incredibly variadic JS runtime API. You can pass in any number of input selectors, as either individual function arguments or one big array, and all the rest of the output behavior depends on those. This one giant MergeParameters type is effectively replacing 3300 lines of copy-pasta'd typedefs for 1...12 input selectors.
-
How to subscribe to a slice of array in redux such that the component subscribed re renders only when the slice changes.
One thing that can help is the new customization options in Reselect 4.1.x. You don't need a deep equal check here. Instead, you could use a shallow check as the resultEqualityCheck option. It would still end up having to re-run the filter statement, because the input array is being changed to a new reference when you do an update to any item in the array. Filtering the array does create a new result array reference. But, resultEqualityCheck: shallowEqual will reuse the previous result as long as the contents of the array are the same, and that will prevent the component from re-rendering.
-
Testing Redux Selectors with resultFunc
Over the years, as I've been using Redux, I've tried quite a few different forms of testing. Actions, reducers, sagas, selectors, some with more boiler plate results than others. One of the evolutions of testing that I've enjoyed the most has been with the library I use for selectors, reselect.
-
What's new in Redux?
While Reselect has always been a separate library from Redux itself, it's in our Github org. The previous maintainer had to stop working on it, so a couple months ago we did some major updates to Reselect. Reselect 4.1.x has huge improvements to its TS types for better inference, and adds a new set of customization options like cache sizes > 1.
-
React Interview Questions - Part 2 (Mid - Senior Level)
Fourth, Use Reselect / Re-reselect in Redux to Avoid Frequent Re-render. Reselect is a library for building memoized selectors that is commonly used for redux.
-
I wrote an article about Redux architecture for SwiftUI, you can achieve pretty amazing stuff using it. Below Hot Reload implemented in 30 minutes. More links in comments. It's worth at least getting familiar with this architecture :)
Another great tool used in the Redux world is Reselect. Storing the bare minimum data in the Redux store and then deriving data with memoization using Reselect. I had to create a poor man's version here. Feel free to check it out :)
-
What are some problems with Redux?
We've completely revamped the Reselect types in the last few weeks and added new cache size options to its API - see https://github.com/reduxjs/reselect/releases
- React State Management
-
The React roadmap for beginners you never knew you needed.
Reselect
redux
-
Using Zustand in React applications
In this post we are going to look closely to one of the state management libraries - Zustand. This is a good alternative to Redux for development of React applications if you find Redux too complicated or too heavy for your current project.
-
Display a simple loading indicator between routes in react router
Reactjs I'm coming from AngularJS world and start some days ago writing my first React App with react-router, in AngularJS I do: app.directive('Loading', function($rootScope, $timeout) { return { restrict: 'E', replace: true, template: 'Loading' link: function(scope, element) { $rootScope.$on('$routeChangeStart', function(event, currentRoute, previousRoute) { element.removeClass('ng-hide'); }); $rootScope.$on('$routeChangeSuccess', function() { element.addClass('ng-hide'); }); } };}); and then I just add . So now in my React App I have: class App extends Component { render() { return ( Home About ); }} and my two components are simple: class Home extends Component { render() { return ( Home ); }}class About extends Component { render() { return ( About ); }} Can I do this without using reduxJS? Answer link : https://codehunter.cc/a/reactjs/display-a-simple-loading-indicator-between-routes-in-react-router
-
By Crayons and For Crayons
It is using Webpack for bundling, Redux and Immer for application state management.
-
InfoAbout.me
This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template.
-
InSelfView
State Management: Redux _ a Predictable State Container for React.
-
The Complete Modern React Developer 2022
This will be a course for becoming a Complete Modern React Developer in 2022. The only three topics which are not covered in this course are Redux, GraphQL and React Native which could be covered in a future course. TypeScript is going to be the main programming language covered however if you already know JavaScript then you should find it quite easy to understand because the syntax is not that much different.
-
what is the main property in redux's package.json refer to?
the main property of package.json file for redux is "main": "lib/redux.js", but I can't find such a file/module on the Redux Github page.
-
The redux team's "createStore" deprecation seems to me like it is abusing dependencies as a SPAM mechanism
Addressed in the initial comment of the deprecation discussion issue
Release notes https://github.com/reduxjs/redux/releases/tag/v4.2.0
What are some alternatives?
zustand - 🐻 Bear necessities for state management in React
react-query - ⚛️ Hooks for fetching, caching and updating asynchronous data in React
valtio - 💊 Valtio makes proxy-state simple for React and Vanilla
redux-toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
SWR - React Hooks for Data Fetching
effector-react - Business logic with ease ☄️
Immer - Create the next immutable state by mutating the current one
Recoil - Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
swift-composable-architecture - A library for building applications in a consistent and understandable way, with composition, testing, and ergonomics in mind.
cerebral - Declarative state and side effects management for popular JavaScript frameworks
reflux - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux
fluxible - A pluggable container for universal flux applications.