reselect
redux-toolkit
Our great sponsors
- Amplication - open-source Node.js backend code generator
- Appwrite - The open-source backend cloud platform
- SurveyJS - A Non-Cloud Alternative to Google Forms that has it all.
- InfluxDB - Collect and Analyze Billions of Data Points in Real Time
- Sonar - Write Clean JavaScript Code. Always.
- Mergify - Updating dependencies is time-consuming.
reselect | redux-toolkit | |
---|---|---|
43 | 274 | |
18,946 | 9,876 | |
0.2% | 1.4% | |
4.9 | 8.7 | |
12 days ago | 4 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
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
-
Top 7 Libraries for Blazingly Fast ReactJS Applications
Reselect solves this problem by memorizing the values and only passing whatโs necessary.
-
20 Essential Parts Of Any Large Scale React App
reselect : Selector library to optimize your store access
-
Revolutionize Your React App with Redux: A Beginner's Guide to Simplifying State Management(PART 2)
Reselect documentation:
-
20 Best Libraries and Tools for React Developers
Reselect is a library for creating memoized โselectorโ functions. Commonly used with Redux, to slice state and provide just the necessary subtree to a React component.
-
Please review my 1st react project
For the redux part, you need to use two hooks. The first one is for sending data and that is useDispatch and for getting data from redux is useSelector. This link will help you a lot. The only that left is Reselect concept. The thing with redux is that when you update one state inside of the redux store the whole thing updates itself so basically it may cause you to re-render your components. Reselect will prevent that but it's a little bit advanced topic whenever you were comfortable enough with redux I suggest you learn to use reselect. Other than these Really good work with the project.๐๐ welcome to the community. ๐
-
Killing mutants to improve your tests
At my current client we're working on having a frontend architecture for writing SPAs in JavaScript similar to re-frame's one: an event-driven bus with effects and coeffects for state management[1] (commands) and subscriptions using reselect's selectors (queries).
-
TypeScript is terrible for library developers
Heh, it's amusing to see Redux Toolkit referenced here. I'm one of the two main RTK maintainers. My co-maintainer Lenz Weber is responsible for most of our TS type wizardry.
Agreed that writing TS types for libs can be a pain. I actually did a talk recently on "Lessons Learned Maintaining TS Libraries" [0], where I talked about some of the techniques we used, and some possible TS changes that would be helpful for us as maintainers.
As one recent example, TS made a change in a 4.8 pre-alpha that broke RTK's `createSlice` types. Lenz tried to come up with a fix, couldn't, and had to add a workaround to check what TS version is being used and specifically use an altered type. Since there _isn't_ a good way to know what TS version is being used, Lenz resorted to hacking together a new package that abuses the `typesVersions` property to define a different TS type for _every_ TS major+minor version combo, and then used that to decide what the RTK type should look like conditionally [1].
Another pain point is debugging type transformations. I reworked the Reselect types in 4.1.x to do a much better job of inferring the argument types for the final selector, based on the intersection of all the input selector arguments. This ended up as a monstrous type that does a types-level map + transpose + intersection [2]. It took me weeks to get this working right, and I frequently had to break it down into multiple small intermediate types to see how TS was processing each step.
I know that someone on Twitter was recently working on an alternate TS type-checker based on bytecode, and they said they had some kind of a working types-level debugger [3]. Having something like that officially, where I could see each step of how TS was transforming the types, would be _hugely_ valuable.
There's a couple folks like AndaristRake who are able to dig into the internals of the TS compiler itself to trace how it's interpreting the types. I definitely don't have that ability :)
[0] https://blog.isquaredsoftware.com/2022/05/presentations-ts-l...
[1] https://github.com/reduxjs/redux-toolkit/pull/2547
[2] https://github.com/reduxjs/reselect/blob/v4.1.5/src/types.ts...
[3] https://twitter.com/MarcJSchmidt/status/1539787500788613120
-
Extreme Explorations of TypeScript's Type System
We do a _lot_ of this in the Redux library repos (examples: [0] [1] [2] ). We have some incredibly complicated types in our libraries, and we have a bunch of type tests to confirm expected behavior.
Generally, these can just be some TS files that get compiled with `tsc`, but it helps to have a bunch of type-level assertions about expected types.
I actually recently gave a talk on "Lessons Learned Maintaining TS Libraries" [3], and had a couple slides covering the value of type tests and some techniques.
[0] Redux Toolkit's `createSlice`: https://github.com/reduxjs/redux-toolkit/blob/9e24958e6146cd...
[1] Reselect's `createSelector`: https://github.com/reduxjs/reselect/blob/f53eb41d76da0ea5897...
[2] React-Redux's `connect`: https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3...
[3] https://blog.isquaredsoftware.com/2022/05/presentations-ts-l...
-
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.
redux-toolkit
-
How to manage state in a React app using Redux.
In this tutorial, you managed the state of a React Todo app using Redux. Next, learn how to manage the state using the Redux Toolkit. Redux Toolkit makes it easier to write good Redux applications and speeds up development. Furthermore, learn Redux DevTools to help you trace when, where, why, and how your application's state changed.
-
React Ecosystem in 2023.
redux toolkit
-
Exploring React Query: A Powerful Alternative for Server-Side State Management in React
Nowadays Redux has evolved and it's much easier to start with, thanks to Redux Toolkit. It also has a library with the same purpose as React Query called RTK Query. It applies different concepts than React Query but the idea behind is quite the same.
-
Building an Account switcher with NextJS and Next Auth
The accounts manager is responsible for storing and managing all the accounts that users have used on your app. You can use any state management solution such as Redux, Zustand, Jotai, React Context etc.
-
Scalability: the Lost Level of React State Management
I'm talking about Redux pre-RTK here. Due primarily to its infamous boilerplate, raw Redux has proven to not be a very scalable solution - it's clumsy for small apps to get started with and at the same time is clunkily verbose for large apps.
-
OpenAPI v4 Proposal
I've been using redux toolkit's OpenAPI code generator for a side project and it's been pretty good. The documentation is a bit lacking and it could certainly use more work to make names more customizable. The generated code comes out looking very much machine generated. But I love that RTKQuery (redux toolkit query) has client side caching so that if I use a query param that was already used before, it will remember and just serve from the local cache.
But it's been nice being able to make a backend change, run the code generator, and then be able to use whatever API in react. I hope this type of stuff gets developed more!
[0] - https://github.com/reduxjs/redux-toolkit/tree/master/package...
-
Which state management library should I use?
For global state, Zustand or RTK
-
JavaScript State Machines and Statecharts
Interesting use case, because for a react project with lots of state management, were you not using redux? And if so, were you using Redux Toolkit? https://redux-toolkit.js.org/
The last major react project I worked on I found that RTK kinda functioned as a state machine definition for the project, and let us work on requests states in our components, i.e. if loading do this, if not yet loaded do that, etc.
I guess with this state machine framework you'd also be managing DOM state in one spot which could be kind of nice. In the big project we had to consider Formik managed input fields, buttons, modals, etc.
-
Is redux and thunks still used or are there other alternatives for it now?
Redux is a solid option (Redux meaning RTK)
-
Moving from Context to Redux help!
Use Redux Toolkit. Their docs are very well written and helpful.
What are some alternatives?
redux-saga - An alternative side effect model for Redux apps
zustand - ๐ป Bear necessities for state management in React
redux-thunk - Thunk middleware for Redux
next-redux-wrapper - Redux wrapper for Next.js
react-query - ๐ค Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]
vite - Next generation frontend tooling. It's fast!
SWR - React Hooks for Data Fetching
jotai - ๐ป Primitive and flexible state management for React
react-clean-architecture - A realistic approach to implement clean architecture on react codebases
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.
Immer - Create the next immutable state by mutating the current one
ducks-modular-redux - A proposal for bundling reducers, action types and actions when using Redux