[Question] Readable atom with parameter or Another way

Thank for great works.

I have some question, I develop custom calendar component.

Calendar component have selection map, for example:

// row are number of weekday, col are 7
const calendarSelectionMap: boolean[][] = [];

But, Calendar component don’t know user selected month so dynamic generation array on render time.

// phase 01, create component
const [state, dispatch] = useReducerAtom(mainAtom, reducer);
const rowCount: number = calculateCalendarRowCount(userSelectedMonth);
const days = calculateCalendarDay(userSelectedMonth);

useLayoutEffect(() => {
// phase02 initialize component state
dispatch({ type: 'create-selection-map', rowCount })
}, [ state, dispatch ]);

// phase03 render dom: only example
return (
    {_.times(rowCount).map((rowId) => {
      <div>
          {_.times(7).map((colId) => <div selected={{state.selection[rowId][colId]}}>{days[rowId][colId]}</div>
      </div>
    })}
);

but I got exception phase03, react SSR executed phase01 -> 03 -> 02.

I solve this problem that create wrapper function.

const onGetSelection = useCallback((rowId: number, colId: nubmer) => {
    try { 
       return state.selection[rowId][colId];
    } catch {
       return false;
   }
}, [state])

But I want use state value direct below,

<div selected={{state.selection[rowId][colId]}}>{days[rowId][colId]}</div>

So, I Think that

const readableAtom = atom(mainAtom, (get, param) => {
  const state = get(mainAtom); 

  try {
    return state.selection[param.rowId][param.colId];
  } catch {
    return false;
  } 
});

But I can’t found readable atom with any parameter. I miss understood mechanism?

Thank you for kindness

[dai-shi]

Maybe, I think your example getTodoItemAtom is add to primitives document it is great helpful content.

I wouldn’t at this point, as it’s not the primary recommendation. BUT, it might turn out to be something good with possibly other practice, so I will keep that in mind.

Let me leave another pattern with a custom hook, which may seem more idiomatic (not explicitly suggesting it, but just to expand our ideas):

const useGetTodoItemAtom = () => {
  const [todos] = useAtom(todosAtom)
  const getTodoItem = (id) => todos.filter((todo) => todo.id === id)
  return getTodoItem
)

[imjuni]

@dai-shi

Thank you for your answer.

Great! that is perfect solution for my case. I don’t think that readable atom will be able to function.

Very helpful talk.

Maybe, I think your example getTodoItemAtom is add to primitives document it is great helpful content.

Thank you!