Skip to content

Add example for action types in connected components using typeof #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
The-Spik3r wants to merge 1 commit into
base: master
Choose a base branch
from
+29 −0
Open

Add example for action types in connected components using typeof #238

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/components/PingTest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import { connect } from 'react-redux';
import { createAction } from '@reduxjs/toolkit';
import { Button } from 'react-native';

// Define the actions
const actions = {
ping: createAction<number>('ping/PING', (arg: number) => ({
payload: { arg },
})),
Comment on lines +8 to +10
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

In the createAction call, the type annotation for the arg parameter is redundant. Since you've specified <number> as the generic argument to createAction, TypeScript can correctly infer that arg is of type number. Removing the explicit type annotation makes the code more concise.

Suggested change
ping: createAction<number>('ping/PING', (arg: number) => ({
payload: { arg },
})),
ping: createAction<number>('ping/PING', (arg) => ({
payload: { arg },
})),

};

// Define the props interface using typeof
interface Props {
ping: typeof actions.ping;
}

// Define the functional component
const PingTestComponent: React.FC<Props> = ({ ping }) => {
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

To improve testability, it's a good practice to export the unconnected PingTestComponent. This allows you to import it directly into your test files and test its presentation and logic in isolation, without needing to set up a Redux provider or mock the connect HOC.

Suggested change
const PingTestComponent: React.FC<Props> = ({ ping }) => {
export const PingTestComponent: React.FC<Props> = ({ ping }) => {

return (
<Button onPress={() => ping(123)} title="Ping" />
);
};

// Connect the component to the Redux store
export const PingTest = connect(
null,
{ ping: actions.ping }
)(PingTestComponent);
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The file is missing a final newline character. Most files in this project end with a newline, so for consistency, one should be added here. This is a common convention that can prevent issues with some tools and file concatenations.