Flow - secure actions to ensure type safety

Question

Flow - secure actions to ensure type safety

Currently implementing flow and looking to enhance the type safety of my reducers. I stumbled upon a helpful comment proposing a solution that seems compatible with my existing codebase: https://github.com/reduxjs/redux/issues/992#issuecomment-191152574

I attempted to adapt it using the %checks keyword in flow, but encountered some issues.

Snippet from my code:

export type Action<T> = {
  type: string,
  payload: T,
};

interface ActionCreator<P> {
  type: string;
  (payload: P): Action<P>;
}

export function actionCreator<P>(type: string): ActionCreator<P> {
  return Object.assign((payload: P) => ({ type, payload }), { type });
}

export function isActionOfType<P>(
  action: Action<any>,
  creator: ActionCreator<P>
): boolean %checks {
  return action.type === creator.type;
}

When incorporating it within the reducer function like this

(...)
case isActionOfType(action, getArticles):
  // action.payload still has an 'any' type
(...)

Is there a mistake on my end? Can the TypeScript solution be effectively applied in flow? Or do you recommend an alternative approach? If so, what suggestions can you offer?

javascript typescript redux flowtype type-safety

Answer 1

Answer №1

When working with TypeScript, it's recommended to use an if statement instead of a case statement.

There is no strict requirement to use a case statement in Redux anymore, as the trend now leans towards utilizing if statements with type guards in TypeScript.

You might want to explore this alternative approach. Unfortunately, I can't offer much guidance on flow, but I can suggest following modern patterns for TypeScript that may align with practices in flow.

Additionally, consider looking into the official Redux Toolkit, which offers useful abstractions. While only partially flow-typed, its types could potentially meet your requirements or be enhanced further based on your needs.

Answer 2

When working with TypeScript, it's recommended to use an if statement instead of a case statement.

There is no strict requirement to use a case statement in Redux anymore, as the trend now leans towards utilizing if statements with type guards in TypeScript.

You might want to explore this alternative approach. Unfortunately, I can't offer much guidance on flow, but I can suggest following modern patterns for TypeScript that may align with practices in flow.

Additionally, consider looking into the official Redux Toolkit, which offers useful abstractions. While only partially flow-typed, its types could potentially meet your requirements or be enhanced further based on your needs.

Answer 3

Answer №2

To implement a type generic that links one string type with a payload type, consider using switch cases. It is important to note that switch cases are designed to test against strings in the case, not booleans, so utilizing them in the way shown may not work as expected.

One solution involves leveraging type refinement. By writing conditional JavaScript code, Flow can infer the structure of the payload. However, it is crucial to include all possible type payloads in your action parameter to ensure Flow understands the available structures for refinement. This approach helps clarify the variations in your reducer and specifies which cases should be handled.

try-flow

type AppT = {}

type ActionT<T, P> = {|
  type: T,
  payload: P,
|};

type PayloadA = {| a: string |};
type PayloadB = {| b: string |};

const initialState = {};

const reducer = (
  state: AppT = initialState,
  action: ActionT<'ACTION_A', PayloadA> | ActionT<'ACTION_B', PayloadB>,
): AppT => {
  switch (action.type) {
    case 'ACTION_A': {
      return {
        ...state,
        a: action.payload.a,
      };
    }
    case 'ACTION_B': {
      return {
        ...state,
        a: action.payload.a, // <-- it fails because type refines to PayloadB
        b: action.payload.b,
      };
    }
    default:
      return state;
  }
};

Answer 4

To implement a type generic that links one string type with a payload type, consider using switch cases. It is important to note that switch cases are designed to test against strings in the case, not booleans, so utilizing them in the way shown may not work as expected.

One solution involves leveraging type refinement. By writing conditional JavaScript code, Flow can infer the structure of the payload. However, it is crucial to include all possible type payloads in your action parameter to ensure Flow understands the available structures for refinement. This approach helps clarify the variations in your reducer and specifies which cases should be handled.

try-flow

type AppT = {}

type ActionT<T, P> = {|
  type: T,
  payload: P,
|};

type PayloadA = {| a: string |};
type PayloadB = {| b: string |};

const initialState = {};

const reducer = (
  state: AppT = initialState,
  action: ActionT<'ACTION_A', PayloadA> | ActionT<'ACTION_B', PayloadB>,
): AppT => {
  switch (action.type) {
    case 'ACTION_A': {
      return {
        ...state,
        a: action.payload.a,
      };
    }
    case 'ACTION_B': {
      return {
        ...state,
        a: action.payload.a, // <-- it fails because type refines to PayloadB
        b: action.payload.b,
      };
    }
    default:
      return state;
  }
};

Flow - secure actions to ensure type safety

Answer №1

Answer №2

Similar questions

Creating a dynamic route in Node Express allows for flexible path handling

disable caching for xmlhttp request

Initiating PHP outcomes with the integration of JQUERY and Bootstrap

Kineticjs is not performing up to par

Using AngularJS to update attributes in an HTML tag within a string

Working with Javascript: Navigating a dynamic array of elements

Error: string literal left incomplete with spaces only

Avoid data duplication or triplication by implementing a pop-up loop when adding new information

Using AJAX to query a database and updating a div tag with the submitted form entries

Tips for sending multiple variables in a loop as JSON data through an AJAX request

Not quite sure about the best way to showcase the results // using JavaScript

React / Next.js Rendering Problem, Data Discrepancy Between Client and Server

Creating a Modal in React without the need for a button to trigger it

Tips on displaying JSON data in the browser console using console.log for API consumption

Having trouble sending data to API with Node, Express, and vanilla JavaScript POST form

Vue appears to be having trouble waiting for the axios Post request

Basic Tallying Code in JavaScript

Ensuring TypeScript's strict null check on a field within an object that is part of an

Can you provide a tutorial on creating a unique animation using jQuery and intervals to adjust background position?

The importance of handling undefined values in TypeScript and React