DEV Community: Dennis Cual

restatum - state management tool for lazy people

Dennis Cual — Mon, 24 Aug 2020 22:10:31 +0000

Today I would like to introduce restatum. A minimal, simple, and very "Reactish" library for your state management solution. This would be a great convo for your server state management tool like relay, apollo, swr, react-query, etc :-).

Samples are included in the documentation.

Typescript hack: Simple utility type for changing type of keys

Dennis Cual — Wed, 07 Aug 2019 17:36:01 +0000

When making all keys optional in Typescript, we gonna use the utility type Partial. But what if we want to change the type of some keys of
given object type?

I created a simple utility type to achieve this goal. First of all, I will show you how to use it and lastly show the codes.

type User = {
  id: number
  name: string
  age: number
  hobbies: []
}

type OtherUser = ChangeTypeOfKeys<User, 'id' | 'age', string>

This is simple utility. First, it accepts the target object type. Then the keys, its a union type, we want to change and lastly pass the new type. The created type of OtherUser will have a shape like this:

type OtherUser = {
 id: string
 name: string
 age: string
 hobbies: []
}

Sweet! We just changed the type of keys from number to string. The codes for this utility type:

/**
 * Change the type of Keys of T from NewType
 */
export type ChangeTypeOfKeys<
  T extends object,
  Keys extends keyof T,
  NewType
> = {
  // Loop to every key. We gonna check if the key
  // is assignable to Keys. If yes, change the type.
  // Else, retain the type.
  [key in keyof T]: key extends Keys ? NewType : T[key]
}

Thats all! If you think this is helpful. Like and share!

Fun to use state management for your React

Dennis Cual — Sat, 03 Aug 2019 05:42:00 +0000

When managing your React state, your state manager should only give you simple works to do the job even though that you are maintaining huge state. small is the new big. Yes indeed! It must only give you small utilities to manage it and will be sufficed. It means that it must have minimal API.

easy-react-state gives you this kind of features and use it in fun and easy way. It is like bigger version of React.useState hook but managing different state. It also has smaller API surface so you don't need to learn many stuffs just to make it right.

Let's take a look on how we can use the awesome library:

1 - Configuring your store

NOTE: easy-react-state uses immerjs. So when updating a state, you can use any syntax. This is very handy especially if you change nested property's value. You can use mutator syntax just like state.user.name = 'Zion'.

const configAppStore = {
  todos: {
    initialState: [],
    setters: state => ({
      addTodo(todo) {
        state.push(todo)
        return state
      },
    }),
  },
}

2 - Creating state manager based on your store

NOTE: The returned useSelector will subscribe to the store based on the data which user need and will only re-render the Consumer Component if and only if the subscribed data will change even though the root state gets updated.

const [useAppSelector, appSetters] = createStateManager(configAppStore)

3 - Consume to your React Component

NOTE: We don't need a Provider to consume the store. Just create a manager, then you can use it directly.

const App = () => {
  const todos = useAppSelector(state => state.todos)
  console.log('todos', todos)
  return (
    <div>
      <h3>Todos Control</h3>
      <button
        onClick={() => {
          const todo = {
            id: `todo-${Date.now()}`,
            label: `Todo ${Date.now()}`,
          }
          appSetters.todos.addTodo(todo)
        }}
      >
        Add todo
      </button>
    </div>
  )
}

Pretty simple right? How about async updates? This is easy.

Because the setters are just object which are created outside the Component, then you can call it wherever you want. For an instance, call it inside async function:

const [useAppSelector, appSetters] = createStateManager(configAppStore)

async function fetchUsers() {
  appSetters.users.loading()
  try {
    const res = await apiUsers()
    appSetters.users.setUsers(res)
  } catch (err) {
    appSetters.users.setError(err)
  }
}

And thats it! If you are interested and want to try, you can check its github repo for more info. Of course, it is open-source and feel free to give feedbacks and contribute!