How do you work with side effects?

[redux-zero]

How do you work with side effects?

[malbernaz]

exactly the point! Rule of thumb is: if your action is async use the store methods, otherwise just use the state parameter from the action.

[malbernaz]

Although thinking about this example, maybe it would be nice to perform something like this:

const getActions = ({ setState }) => ({
  async getTodos() {
    try {
      setState({ loading: true });
      
      const payload = await client.get("/todos");
      
      return { payload, loading: false };
    } catch (error) {
      return { error, loading: false };      
    }
  }
});

And this kind of action, probably have a better testability. It could be done roughly like this:

describe("todo actions", () => {
  let actions, store, listener, unsubscribe;
  beforeEach(() => {
    store = createStore();
    actions = getActions(store);
    listener = jest.fn();
    unsubscribe = store.subscribe(listener);
  });

  it("should fetch todos", async () => {
    nock('http://someapi.com/')
      .get('/todos')
      .reply(200, { id: 1, title: "test stuff" });

    await actions.getTodos();

    const [LOADING_STATE, SUCCESS_STATE] = listener.mock.calls.map(([call]) => call);

    expect(LOADING_STATE.loading).toBe(true);
    expect(SUCCESS_STATE.payload).toEqual({ id: 1, title: "test stuff" });
    expect(SUCCESS_STATE.loading).toBe(false);
  });
});

@matheusml, your opinion please.

[k1r0s]

I try to keep actions as pure as posible (state in / state out) and manage the side actions in the component with something like this to keep component as clean as posible

import { config } from 'http-decorator';

config.base = 'http://jsonplaceholder.typicode.com';
...
class SomeClass {
  @http('put')
  public someMethod (url: string, params?: any, error?, result?): void {
    // the actual body method will be executed after request was performed
    if (error) throw error
    ... do something with the result
  }
}
...
someClassInstance.someMethod('users');

// the same as doing
// $ curl -X PUT http://jsonplaceholder.typicode.com/users

Hope this may help.

[matheusml]

Hi @seveves

That's a good question. Right now we don't have the full documentation, but we have some examples on dealing with async functions.

But, I think that your example is 100% fine.

@malbernaz have something to add here?

[seveves]

@k1r0s and @matheusml ... thank you for your answers!
I want to remove all the async http logic from my components to keep them as simple as possible but of course the actions should stay as pure as possible. As always you have to compromise. And redux-zero should stay small and simple so it's ok that the users have to find a way to go with.
But yeah ... maybe it would be helpful to have something about side effects in the documentation 👍

When @malbernaz has nothing to add here then feel free to close this "issue".

[malbernaz]

@seveves you are thinking as if you were using redux... In redux-zero we expose the store in the actions function to better support async. You don't need to have three actions to handle a fetch request, you can do something like this:

const actions = ({ getState, setState }) => ({
  fetch: state => {
    fetchFromApi()
      .then(payload => {
        setState({ payload, loading: false });
      })
      .catch(error => {
        setState({ error, loading: false });
      })

    return { loading: true };
  }
});

[seveves]

so const actions = store => ({ ... }) is the same as const actions = ({ getState, setState }) => ({ ... })? Not needing the three actions sounds very nice :)

[matheusml]

If you have more questions @seveves feel free to ask.
For now, I'm closing this 👍

[matheusml]

Since async/await is what the cool kids are doing, and the readability for this case is better, I think we should do it 👍

[esperancaJS]

none of the examples above seem to be working :s

Only Loading get's updated, but the other state attributes don't