refactor(toast): Fix unnecessarily re-rendering all children of toast context on every state change

[jamcry]

What is the problem?

• In our apps, we mostly only care Toast state dispatch function. But in the current implementation, since useToaster returns both state and dispatch in the same object, dispatch function will "change" on every state change, and this will cause re-render in the components that use dispatch.

Possible (implemented) Solution

• Separating state and dispatch contexts, so that state changes won't trigger a change in dispatch

Result (before vs after) [green border means that element is re-rendered]

I tried on my local with npm-link, here is the result:
https://user-images.githubusercontent.com/22727931/175345592-35eadfd1-6b05-4a3d-9334-7320a0e95f32.mov
Only necessary elements re-renders. As expected.

If the app is only using useToaster, it won't be a breaking change and won't require any changes on the project

[edizcelik]

This approach is the way to go when using Contexts 🥇 I had a few comments about how we can make the consumers safer

[edizcelik]

By the way, we can update the file structure here. We recently started using this convention on Tinyman and it looks quite nice:

.../ToastContext.tsx     <- this includes Contexts and the ToastContextProvider
.../ToastContext.utils.ts      <-  this includes the custom hooks for the consumers
.../ToastContext.reducer.ts      <- includes the reducer and the state stuff
.../ToastContext.constants.ts    <- includes constants related to the Context
.../ToastContext.types.ts      <- includes types related to the Context (if any)

[jamcry]

By the way, we can update the file structure here. We recently started using this convention on Tinyman and it looks quite nice:

.../ToastContext.tsx     <- this includes Contexts and the ToastContextProvider
.../ToastContext.utils.ts      <-  this includes the custom hooks for the consumers
.../ToastContext.reducer.ts      <- includes the reducer and the state stuff
.../ToastContext.constants.ts    <- includes constants related to the Context
.../ToastContext.types.ts      <- includes types related to the Context (if any)

I think it's a good idea to make these files more organized 👍
It will cause changes at a lot of files because toast has three contexts now: ToastDispatchContext, ToastStateContext and ToastItemContext.

I'll create an issue, we can do this refactor in another PR, also for ToggleContext to make all consistent