How do you work with side effects?

for example I have three actions that fetch data via HTTP: fetch, fetchSuccess, fetchError

is something like the following “ok”?

const actions = store => ({
    fetch: state => {
        const stateUpdate = { ...state, loading: true };
        fetchFromApi().then(data => store.fetchSuccess(stateUpdate, data), err => store.fetchError(stateUpdate, err));
        return stateUpdate;
    },
    fetchSuccess: (state, payload) => ({ ...state, data: payload, loading: false }),
    fetchError: (state, payload) => ({ ...state, loading: false, error: payload }),
});

[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.

[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.