Skip to content

Instantly share code, notes, and snippets.

@aprilrd
aprilrd / genesis.js
Last active May 8, 2018 07:01
Redux + Immutable.Map
import { Map } from "immutable";
// reducers
const INITIAL_STATE = Map({ post: null, isLoading: false });
function postReducer(state = INITIAL_STATE, action) {
switch (action.type) {
case "FETCHED": {
return state.withMutations(currentState =>
currentState.set("post", action.payload.post).set("isLoading", false),
@aprilrd
aprilrd / first-iteration-1.ts
Last active May 8, 2018 07:01
Immutable.Map Type Definition
interface Keyed<K, V> extends Collection<K, V>, Iterable.Keyed<K, V> { ... }
interface Map<K, V> extends Keyed<K, V> {
set(key: K, value: V): Map<K, V>;
setIn(keyPath: Array<any>, value: any): Map<K, V>;
...
}
@aprilrd
aprilrd / first-iteration-2.ts
Last active May 8, 2018 07:02
Typescript + Redux + Immutable.Map
// scaffolding
interface IPostStateImmutable {
get(key: "post"): IPostImmutable | null; // IPostImmutable is also another hacky interface like IPostStateImmutable.
get(key: "isLoading"): boolean;
set(key: "post", value: IPostImmutable | null): IPostStateImmutable;
set(key: "isLoading", value: boolean): IPostStateImmutable;
withMutations(
mutator: (mutable: IPostStateImmutable) => IPostStateImmutable,
): IPostStateImmutable;
}
@aprilrd
aprilrd / second-iteration.ts
Last active May 8, 2018 07:02
Typescript + Redux + Typescript Readonly Interfaces
import { TypedRecord, recordify } from "typed-immutable-record";
// scaffolding
interface IPostState {
post: IPost | null;
isLoading: boolean;
}
interface IPostStateRecordPart {
post: IPostRecord; // this interface is created in a similar fashion.
isLoading: boolean;
}
@aprilrd
aprilrd / third-iterations-2.ts
Created May 8, 2018 06:56
Deep Update Trouble
return {
...state,
post: {
...state.post,
author: {
...state.post.author,
relation: {
...state.post.author.relation,
following: true,
},
@aprilrd
aprilrd / fourth-iteration.ts
Created May 8, 2018 06:57
Typescript + Redux + Typescript Readonly Interfaces + Normalizr
// post reducer
interface IPostState
extends Readonly<{
postId: number | null;
isLoading: boolean;
}> {}
const INITIAL_STATE: IPostState = {
postId: null,
isLoading: false,
@aprilrd
aprilrd / third-iteration-1.ts
Created May 8, 2018 07:03
Typescript + Redux + Typescript Readonly Interfaces
// scaffolding
interface IPostState
extends Readonly<{
post: IPost | null;
isLoading: boolean;
}> {} // this has to be a Readonly interface as well.
// reducers
const INITIAL_STATE: IPostState = {
post: null,
@aprilrd
aprilrd / both-container.ts
Created May 20, 2019 07:42
Typescript+Redux Best Practice at Vingle
interface Connect {
<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
): InferableComponentEnhancerWithProps<
TStateProps & TDispatchProps & TOwnProps,
TOwnProps
>;
}