How i can make code more clean with reduxsauce-typescript-immutable

[Khanh Nguyen]

@jkeam Hi, I think i found the solution for #100

The code bellow runs normally with no warnings but i think it's so long. How can i make it more clean

My redux here

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

/* ------------- Types and Action Creators ------------- */
enum TypesNames {
  SET_INFO_REGISTER = 'SET_INFO_REGISTER',
  SET_CHECK_NEW_POLYMATE = 'SET_CHECK_NEW_POLYMATE',
  SET_INFO_NAME = 'SET_INFO_NAME'
}

type ActionTypes =
  | TypesNames.SET_INFO_REGISTER
  | TypesNames.SET_CHECK_NEW_POLYMATE
  | TypesNames.SET_INFO_NAME

export interface ActionParamTypes extends Action<ActionTypes> {
  setInfoRegister: {
    newPolymate: boolean
    name: string
    sex: boolean
  }
  setCheckNewPolymate: boolean
  setInfoName: string
}

export const { Types, Creators } = createActions<{
  [TypesNames.SET_INFO_REGISTER]: string
  [TypesNames.SET_CHECK_NEW_POLYMATE]: string
  [TypesNames.SET_INFO_NAME]: string
}>({
  setInfoRegister: ['setInfoRegister'],
  setCheckNewPolymate: ['setCheckNewPolymate'],
  setInfoName: ['setInfoName']
})

export const AuthTypes = Types
export default Creators

export interface FunctionTypes {
  merge(param: {}): any
}
export interface AuthStateTypes {
  infoRegister: {
    newPolymate: boolean
    name: string
    sex: boolean
  }
}
type StateTypes = FunctionTypes & AuthStateTypes

/* ------------- Initial State ------------- */
export const INITIAL_STATE: ImmutableObject<AuthStateTypes> = Immutable({
  infoRegister: {
    newPolymate: false,
    name: '',
    sex: false
  }
})

/* ------------- Reducers ------------- */
export const setInfoRegister = (
  state: StateTypes,
  { setInfoRegister }: ActionParamTypes
) => state.merge({ setInfoRegister })

export const setCheckNewPolymate = (
  state: StateTypes,
  { setCheckNewPolymate }: ActionParamTypes
) =>
  state.merge({
    infoRegister: {
      ...state.infoRegister,
      newPolymate: setCheckNewPolymate
    }
  })

export const setInfoName = (
  state: StateTypes,
  { setInfoName }: ActionParamTypes
) => state.merge({ infoRegister: { ...state.infoRegister, name: setInfoName } })

/* ------------- Hookup Reducers To Types ------------- */
export const reducer = createReducer(INITIAL_STATE, {
  [Types.SET_INFO_REGISTER]: setInfoRegister,
  [Types.SET_CHECK_NEW_POLYMATE]: setCheckNewPolymate,
  [Types.SET_INFO_NAME]: setInfoName
})

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

Display the state

 const checkNewPolymate = useSelector(
    (state: RootState) => state.auth.infoRegister.newPolymate
  )

And i dispatch here

dispatch(AuthActions.setCheckNewPolymate(!checkNewPolymate))

[Jon Keam]

Hi, this is really awesome. You did a great job of fully typing everything out. I'm with you and would really love a shorter way to get this done. I've opened this PR using this branch. Can you check out this branch when you have time and see how it works for you? I'd love your feedback @emonno13. Thanks!

[Jon Keam]

Here is the following shortened version of your code using this branch.

import { createReducer, createActions } from 'reduxsauce'
import Immutable, { ImmutableObject } from 'seamless-immutable'

/* ------------- Types and Action Creators ------------- */
export const { Types, Creators } = createActions({
  setInfoRegister: ['setInfoRegister'],
  setCheckNewPolymate: ['setCheckNewPolymate'],
  setInfoName: ['setInfoName']
})

export const AuthTypes = Types
export default Creators

export interface AuthStateTypes {
  infoRegister: {
    newPolymate: boolean
    name: string
    sex: boolean
  }
}

/* ------------- Initial State ------------- */
export const INITIAL_STATE: ImmutableObject<AuthStateTypes> = Immutable({
  infoRegister: {
    newPolymate: false,
    name: '',
    sex: false
  }
})

/* ------------- Reducers ------------- */
export const setInfoRegister = (
  state,
  { setInfoRegister }
) => state.merge({ setInfoRegister })

export const setCheckNewPolymate = (
  state,
  { setCheckNewPolymate }
) =>
  state.merge({
    infoRegister: {
      ...state.infoRegister,
      newPolymate: setCheckNewPolymate
    }
  })

export const setInfoName = (
  state,
  { setInfoName }
) => state.merge({ infoRegister: { ...state.infoRegister, name: setInfoName } })

/* ------------- Hookup Reducers To Types ------------- */
export const reducer = createReducer(INITIAL_STATE, {
  [Types.SET_INFO_REGISTER]: setInfoRegister,
  [Types.SET_CHECK_NEW_POLYMATE]: setCheckNewPolymate,
  [Types.SET_INFO_NAME]: setInfoName
})

[Khanh Nguyen]

@jkeam Oh, really thanks for your support. Yes, the main problem is if we don't declare the types of actions

.... typescripts will throw errors here. It's is not simple like javarscript

Anyway, I think my way is short enough for typescript. I pursuaded my boss to use this way but faill =)) LOL =))) he said it's so long

[Jon Keam]

Is this code snippet using the new branch? https://github.com/jkeam/reduxsauce/tree/bugfix/typescript-reducers

I wanted to get some feedback on it before I merged it in and released it.

[Khanh Nguyen]

@jkeam I hope you and your team will lauch many awesome features for reduxsauce in the future. Best wishes to you. Hope i still contribute to this lib <3

[Khanh Nguyen]

https://github.com/jkeam/reduxsauce/tree/bugfix/typescript-reducers

@jkeam i will see it later and give you feedback. But is it full for both typescript and javascript ?

[Jon Keam]

Javascript should be working today (if not please tell me :)). This should hopefully fix it for Typescript.

[Khanh Nguyen]

@jkeam


Oh !!!!! It's really work. Please merge it <3 You make my day

[Khanh Nguyen]

@jkeam And maybe i think you should improve your documents more clearly for beginners. Maybe a full example or so on ...

[Jon Keam]

I'll leave this PR open most likely until the weekend to give people a chance to comment, and then if no more feedback I'll merge this in and release it. Thanks again!!

[Jon Keam]

Pushed out v1.1.3! Open another issue if you find any issues. Thanks again @emonno13 for your help!

[Khanh Nguyen]

Pushed out v1.1.3! Open another issue if you find any issues. Thanks again @emonno13 for your help!
Everything is working fine now . So many tkssssss