Add section: Modelling async data with ADT - #360
Add section: Modelling async data with ADT#360libracapitalinvestments-rgb wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Code Review
This pull request introduces a new markdown guide and a corresponding TypeScript file demonstrating how to model asynchronous data in Redux using Algebraic Data Types (ADTs) / discriminated unions instead of boolean flags. The feedback points out a critical issue in both files where mapStateToProps incorrectly types the incoming state as the slice state (RemoteData or State) instead of the global RootState, which would lead to runtime errors when accessing properties. Suggestions are provided to define a proper RootState type and map the slice state correctly.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const mapStateToProps = (state: RemoteData<Error, Array<User>>) => ({ | ||
| usersData: state, | ||
| }); |
There was a problem hiding this comment.
In a standard Redux application, the state passed to mapStateToProps represents the global root state (usually combined via combineReducers), not the individual slice state. Typing state as RemoteData directly will cause runtime errors (e.g., usersData will be assigned the root state object, and usersData.status will be undefined, leading to a crash when trying to render). We should define a RootState type to represent the global state structure.
| const mapStateToProps = (state: RemoteData<Error, Array<User>>) => ({ | |
| usersData: state, | |
| }); | |
| type RootState = { | |
| users: RemoteData<Error, Array<User>>; | |
| }; | |
| const mapStateToProps = (state: RootState) => ({ | |
| usersData: state.users, | |
| }); |
| const mapStateToProps = (state: State) => ({ | ||
| usersData: state, | ||
| }); |
There was a problem hiding this comment.
In a standard Redux application, the state passed to mapStateToProps represents the global root state (usually combined via combineReducers), not the individual slice state. Typing state as State directly will cause runtime errors (e.g., usersData will be assigned the root state object, and usersData.status will be undefined, leading to a crash when trying to render). We should define a RootState type to represent the global state structure.
| const mapStateToProps = (state: State) => ({ | |
| usersData: state, | |
| }); | |
| type RootState = { | |
| users: State; | |
| }; | |
| const mapStateToProps = (state: RootState) => ({ | |
| usersData: state.users, | |
| }); |
Adds a new section covering the RemoteData ADT pattern for modelling async data in reducers and React components. This pattern makes incorrect states unrepresentable using discriminated union types. Closes #40