Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@stencil/redux
Advanced tools
Readme
A simple redux connector for Stencil-built web components inspired by react-redux
.
npm install @stencil/redux
npm install redux
Stencil Redux uses the redux
library underneath. Setting up the store and defining actions, reducers, selectors, etc. should be familiar to you if you've used React with Redux.
// redux/reducers.ts
import { combineReducers } from 'redux';
// Import feature reducers and state interfaces.
import { TodoState, todos } from './todos/reducers';
// This interface represents app state by nesting feature states.
export interface RootState {
todos: TodoState;
}
// Combine feature reducers into a single root reducer
export const rootReducer = combineReducers({
todos,
});
// redux/actions.ts
import { RootState } from './reducers';
// Import feature action interfaces
import { TodoAction } from './todos/actions';
// Export all feature actions for easier access.
export * from './todos/actions';
// Combine feature action interfaces into a base type. Use union types to
// combine feature interfaces.
// https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types
export type Action = (
TodoAction
);
// redux/store.ts
import { Store, applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk'; // add-on you may want
import logger from 'redux-logger'; // add-on you may want
import { RootState, rootReducer } from './reducers';
export const store: Store<RootState> = createStore(rootReducer, applyMiddleware(thunk, logger));
// components/my-app/my-app.tsx
import { store } from '@stencil/redux';
import { Action } from '../../redux/actions';
import { RootState } from '../../redux/reducers';
import { initialStore } from '../../redux/store';
@Component({
tag: 'my-app',
styleUrl: 'my-app.scss'
})
export class MyApp {
componentWillLoad() {
store.setStore(initialStore);
}
}
:memo: Note: Because the mapped props are technically changed within the component, mutable: true
is required for @Prop
definitions that utilize the store. See the Stencil docs for info.
// components/my-component/my-component.tsx
import { store, Unsubscribe } from '@stencil/redux';
import { Action, changeName } from '../../redux/actions';
import { RootState } from '../../redux/reducers';
@Component({
tag: 'my-component',
styleUrl: 'my-component.scss'
})
export class MyComponent {
@Prop({ mutable: true }) name: string;
changeName!: typeof changeName;
unsubscribe!: Unsubscribe;
componentWillLoad() {
this.unsubscribe = store.mapStateToProps(this, state => {
const { user: { name } } = state;
return { name };
});
store.mapDispatchToProps(this, { changeName });
}
componentDidUnload() {
this.unsubscribe();
}
doNameChange(newName: string) {
this.changeName(newName);
}
}
redux-thunk
Some Redux middleware, such as redux-thunk
, alter the store's dispatch()
function, resulting in type mismatches with mapped actions in your components.
To properly type mapped actions in your components (properties whose values are set by store.mapDispatchToProps()
), you can use the following type:
import { ThunkAction } from 'redux-thunk';
export type Unthunk<T> = T extends (...args: infer A) => ThunkAction<infer R, any, any, any>
? (...args: A) => R
: T;
// redux/user/actions.ts
import { ThunkAction } from 'redux-thunk';
export const changeName = (name: string): ThunkAction<Promise<void>, RootState, void, Action> => async (dispatch, getState) => {
await fetch(...); // some async operation
};
In the component below, the type of this.changeName
is extracted from the action type to be (name: string) => Promise<void>
.
// components/my-component/my-component.tsx
import { changeName } from '../../redux/actions';
export class MyComponent {
changeName!: Unthunk<typeof changeName>;
componentWillLoad() {
store.mapDispatchToProps(this, { changeName });
}
}
FAQs
Stencil Redux - A simple redux-connector for Stencil-built web components
We found that @stencil/redux demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).