Generalized .d.ts typedef

[mrnkr]

Hello there :)

I've been using this lib for some time now and I really enjoy it, didn't know it had typescript definitions tho since I've been using it at work and our codebase is js only, no ts... Anyway, when I saw the current typedef I thought it didn't let the developer be as thorough with their definitions as they may want to be so I made a few additions... I think someone proposed something similar to this PR in a question as well...

An example of how to use the new typedef:

import { AnyAction } from 'redux';
import { createActions, createReducer } from 'reduxsauce';

export interface MyActionTypes {
  DO_IT: string;
}

export interface MyActionCreators {
  doIt: (data: { anakin: string }) => AnyAction;
}

const { Types, Creators } = createActions<MyActionTypes, MyActionCreators>({
  doIt: [ 'data' ]
}, { prefix: 'PALPATINE_' });

const reducer = createReducer({ anakin: 'its not the jedi way', dooku: { more: 'powerful', than: 'any jedi' } }, {
  [Types.DO_IT]: (state, { data }) => ({ ...state, ...data })
});

The main idea was to keep the old definition as default while allowing the developer to provide more granular definitions for their specific use case. I tested this a bit and was quite pleased, I hope you will be too. I did try to eliminate the need to declare the action types as a separate interface but it does not seem to be possible to just grab some keys from a definition, map them to screaming snake case and then use them in another definition...

Hope to hear some feedback soon!

[DiFuks]

My example. For more detailed description of actions

// actions.ts
import { createActions } from 'reduxsauce';
import { Action } from 'redux';

import { DefaultFetchingStatuses } from '@app/common/constants/defaultFetchingStatuses';

export const enum TypesNames {
  LOGIN_ON_SUBMIT = 'LOGIN_ON_SUBMIT',
  LOGIN_CHANGE_FETCH_STATUS = 'LOGIN_CHANGE_FETCH_STATUS',
}

export interface IOnSubmit extends Action<TypesNames.LOGIN_ON_SUBMIT> {
  login: string;
  password: string;
}

export interface IChangeFetchStatus extends Action<TypesNames.LOGIN_CHANGE_FETCH_STATUS> {
  status: DefaultFetchingStatuses;
}

export const { Types, Creators } = createActions<{
  [TypesNames.LOGIN_ON_SUBMIT]: string;
  [TypesNames.LOGIN_CHANGE_FETCH_STATUS]: string;
}, {
  loginOnSubmit: (login: string, password: string) => IOnSubmit;
  loginChangeFetchStatus: (status: DefaultFetchingStatuses) => IChangeFetchStatus;
}>({
  loginOnSubmit: ['login', 'password'],
  loginChangeFetchStatus: ['status'],
});

// reducer.ts
import { createReducer } from 'reduxsauce';

import { IChangeFetchStatus, IOnSubmit, Types } from './actions';
import { DefaultFetchingStatuses } from '@app/common/constants/defaultFetchingStatuses';

export interface IState {
  login: string;
  password: string;
  fetchStatus: DefaultFetchingStatuses;
}

export const reducer = createReducer<IState, IOnSubmit | IChangeFetchStatus>({
  login: null,
  password: null,
  fetchStatus: DefaultFetchingStatuses.NONE,
}, {

  [Types.LOGIN_ON_SUBMIT]: (state, action: IOnSubmit) => ({
    ...state,
    login: action.login,
    password: action.password,
    fetchStatus: DefaultFetchingStatuses.IN_PROGRESS,
  }),

  [Types.LOGIN_CHANGE_FETCH_STATUS]: (state, action: IChangeFetchStatus) => ({
    ...state,
    fetchStatus: action.status,
  }),
});

[infinitered-circleci]

🎉 This PR is included in version 1.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[emonno13]

So many thanks @DiFuks ^^ You saved my day. I also find my solution with Reduxsauce/Ducks pattern

import { createReducer, createActions } from 'reduxsauce'
import { Action } from 'redux';
import Immutable from 'seamless-immutable'

/* ------------- Types and Action Creators ------------- */

enum TypesNames {
    SET_INFO_REGISTER = 'SET_INFO_REGISTER',
    CHANGE_NAME = 'CHANGE_NAME'
}

export interface SetInfoParamType extends Action<TypesNames.SET_INFO_REGISTER | TypesNames.CHANGE_NAME> {
    setInfoRegister: {
        newPolymate: boolean
        name: string
        sex: boolean
    }
    changeName: string
}

// CreateActions
export const { Types, Creators } = createActions<{
    [TypesNames.SET_INFO_REGISTER]: string;
    [TypesNames.CHANGE_NAME]: string;
}, {
    setInfoRegister: (
        setInfoRegister: {
            newPolymate: boolean,
            name: string,
            sex: boolean
        }

    ) => SetInfoParamType;
    changeName: (name: string) => SetInfoParamType
}>({
    setInfoRegister: ['setInfoRegister'],
    changeName: ['changeName']
});

export const AuthTypes = Types
export default Creators

export interface AuthStateType {
    merge: (params: object) => object
    infoRegister: {
        newPolymate: boolean
        name: string
        sex: boolean
    }
}

/* ------------- Initial State ------------- */

export const INITIAL_STATE: AuthStateType = Immutable({
    infoRegister: {
        newPolymate: false,
        name: 'a',
        sex: false
    }
})

/* ------------- Reducers ------------- */

export const setInfoRegister = (state: AuthStateType, { setInfoRegister }: SetInfoParamType) => ({
    ...state,
    infoRegister: setInfoRegister
})

export const changeName = (state: AuthStateType, { changeName }: SetInfoParamType) => ({
    ...state,
    infoRegister: {
        ...state.infoRegister,
        name: changeName
    }
})
/* ------------- Hookup Reducers To Types ------------- */

export const reducer = createReducer<AuthStateType, SetInfoParamType>(INITIAL_STATE, {
    [Types.SET_INFO_REGISTER]: setInfoRegister,
    [Types.CHANGE_NAME]: changeName
})

// /* ------------- Selectors ------------- */

[DiFuks]

@emonno13
I highly recommend using https://redux-toolkit.js.org/tutorials/basic-tutorial. It has wonderful type support, and it was also created by the creators of redux.

[emonno13]

@emonno13
I highly recommend using https://redux-toolkit.js.org/tutorials/basic-tutorial. It has wonderful type support, and it was also created by the creators of redux.

yeah, maybe i will use it in the future. Tks u <3