Side effects / async actions

[diegohaz]

I'm thinking on a way to handle side effects and/or async actions on constate. This is how I'm currently planning to use it:

const effects = {
  createPost: payload => async ({ state, setState, props }) => {
    try {
      const data = await api.post('/posts', payload)
      setState({ data })
    } catch (error) {
      setState({ error })
    }
  }
}

Possible names:

• asyncActions
• effects
• thunks
• methods
• (suggestions are welcome)

[hiddenboox]

+1 for name it effects

[diegohaz]

@hiddenboox My only problem with effects is that it may give the impression that it's not imperative. That is, people may think that it reacts to other actions and can't be called directly, similar to redux-saga, which isn't the case.

asyncActions is kind of ugly, but goes straight to the point. However, the function may not be async at all. People may want to use it only to have access to setState for some reason.

I'm more inclined to use thunks. Besides being familiar for who were used to redux-thunk, that makes total sense: https://en.wikipedia.org/wiki/Thunk

[joshuaquek]

You guys might wanna check out Rematch (2.8k stars)

https://github.com/rematch/rematch/blob/master/docs/purpose.md

For async methods, just do your regular async/await on it : https://github.com/rematch/rematch#step-2-models

[diegohaz]

Thank you, @joshuaquek. I'd already taken a look at Rematch before. Never used it though. It looks like a good solution for people who are using Redux.

Constate has a different purpose. It's not intended to be a replacement for Redux. The problem is that people are using Redux for everything, even when they might not need it, making their projects unnecessarily complex upfront. And I had done that myself.

I built Constate to fill that void in cases when you don't need Redux, MobX (or Rematch). It's not even supposed to be the only solution for state management within a single project. People can combine it with other solutions. In the end, it's just a component (State).

I know you're bringing it up just as a reference, not for comparison, but I wanted to share my thoughts 😄

That said, it's good to know that they use effects as imperative routines. Although I still think it can be confusing.

[diegohaz]

Another possible API is to pass actions instead of setState:

const actions = {
  setData: data => () => ({ data }),
  setError: error => () => ({ error })
};

const effects = {
  createPost: payload => async ({ setData, setError }) => {
    try {
      const data = await api.post('/posts', payload);
      setData(data);
    } catch (error) {
      setError(error);
    }
  }
};

Its more verbose though.

[zeloru]

i suggest Tasks like in .Net/C#: https://docs.microsoft.com/en-us/dotnet/csharp/async
or future like in C++ (std::future) or Java (java.util.concurrent.Future)

[guilherme6191]

asyncActions sounds good to me.

[jonjia]

what about asyncConstate

[diegohaz]

Opened a PR (#8) adding effects (turns out that most of the libraries use this name). Would be nice to have some feedback from you guys. 😊