atom-reactions

atom-reactions.js

// // BEFORE
// export const doSome = declareAction(
//   (payload, store) => some()
// )

// export const myAtom = declareAtom(initState, on => [
//   on(doSome, (state, payload) => state + payload),
// ])

// // NOW
// export const doSome = declareAction()

// export const myAtom = declareAtom(initState, on => [
//   on(doSome, (state, payload) => state + payload),
//   on(doSome, (state, payload) => store => some())
// ])

/** EXAMPLE */

// const declareActionsAsync = name => ({
//   call: declareAction("[call]" + name),
//   done: declareAction("[done]" + name),
//   fail: declareAction("[fail]" + name)
// });

// export const fetchData = declareActionsAsync("data");

// export const dataAtom = declareAtom(initState, on => [
//   on(fetchData.call, () => store =>
//     fetch("/data")
//       .then(data => store.dispatch(fetchData.done(data)))
//       .catch(error => store.dispatch(fetchData.fail(error)))
//   ),
//   on(fetchData.done, (state, data) => data),
//   on(fetchData.fail, () => "Error while data receiving")
// ]);

/** EXAMPLE */

// import { initAction } from "@reatom/core";

// export const fetchDataDone = declareAction();
// export const fetchDataFail = declareAction();

// export const dataAtom = declareAtom(initState, on => [
//   on(initAction, () => store =>
//     fetch("/data")
//       .then(data => store.dispatch(fetchData.done(data)))
//       .catch(error => store.dispatch(fetchData.fail(error)))
//   ),
//   on(fetchDataDone, (state, data) => data),
//   on(fetchDataFail, () => 'Error while data receiving')
// ]);

/** EXAMPLE */

// const loggerAtom = declareAtom(null, on => [
//   on(
//     combine({ dataAtom, isLoadingAtom }),
//     (_, domainState) => () => {
//       console.log("New data state: ", domainState);
//     }
//   )
// ]);

// export const domainAtom = combine(
//   [isLoadingAtom, dataAtom, loggerAtom]
// );

/** EXAMPLE */

function withSnapshot(id, atom) {
  declareAtom(null, on => [
    on(atom, (_, data) => () => {
      localStorage.setItem(id, JSON.stringify(data));
    })
  ]);
}

const domainName = "DATA";
const initState = {
  /*...*/
};

export const dataAtom = declareAtom(
  localStorage.getItem(domainName) || initState,
  on => [
    /*...*/
  ]
);

export const domainAtom = withSnapshot(domainName, dataAtom);