🧸 Zustand and Tanstack Query #96

2023-11-07T18:18:32Z

rishighan commented

2023-11-07 18:18:32 +00:00

(Migrated from github.com)

What?

This PR introduces a new way of thinking about client-state and global state.
To that end, I have begun switching from the react-redux state management library to a more deliberate dichotomy:

UI that relies on data coming from an external source (API, endpoint etc.)
UI that needs a slice of state, all across, at any given time

These two use cases have documented, well-researched and recommended approaches, which boils down to:

@tanstack/react-query for syncing with external data sources
zustand for global state management

Why?

Simply put, Redux relies on a lot of boilerplate, actions, reducers, dispatchers, action-types for every single piece of state that I want to surface in the UI. This grew untenable, and I refuse to write more code than I need to. I love deleting code, and this aligns well with that objective.

How?

To begin with, I have already introduced react-query and zustand in https://github.com/rishighan/threetwo/pull/95 and this PR will cover the refactor of the navbar and gradually move to other pages, in incremental PRs.

### What? This PR introduces a new way of thinking about `client-state` and `global state`. To that end, I have begun switching from the `react-redux` state management library to a more deliberate dichotomy: 1. UI that relies on data coming from an external source (API, endpoint etc.) 2. UI that needs a slice of state, all across, at any given time These two use cases have [documented](https://tanstack.com/query/v4/docs/react/overview#motivation), well-researched and recommended approaches, which boils down to: 1. `@tanstack/react-query` for syncing with external data sources 2. `zustand` for global state management ### Why? Simply put, Redux relies on a _lot_ of boilerplate, actions, reducers, dispatchers, action-types for _every_ single piece of state that I want to surface in the UI. This grew untenable, and I refuse to write more code than I need to. I love deleting code, and this aligns well with that objective. ### How? To begin with, I have already introduced `react-query` and `zustand` in https://github.com/rishighan/threetwo/pull/95 and this PR will cover the refactor of the navbar and gradually move to other pages, in incremental PRs.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: frishi/threetwo#96