Блог

У меня есть этот фрагмент кода:

 const App = () => {
  const [selectedMovie, setSelectedMovie] = useState(null);
  return (
    <>
      <AppHeader onSearchClick={() => setSelectedMovie(null)} />
      <AppBody selectedMovie={selectedMovie} onMovieSelect={setSelectedMovie} />
      <AppFooter />
    </>
  );
};
  

Недавно я провел рефакторинг в FP стиле. Чтобы это выглядело красиво, я бы хотел избежать вызова setSelectedMovie(null) в onSearchClick лямбде.

Чего я хотел бы достичь, так это передать функцию, которая будет игнорировать onSearchClick аргументы и будет вызываться с фиксированным null значением, что-то вроде этого:

 <AppHeader onSearchClick={setSelectedMovieCalledWithNullOnly} />
  

Возможно ли это, например, с lodash ?

Вы можете использовать _.wrap() для предоставления функции постоянного значения:

 const fn = x => console.log(x)
const alwaysNull = _.wrap(null, fn)

fn(5) // 5
alwaysNull(1243281) // null  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>  

Если могут быть другие параметры, и вы хотите ограничить функцию, вы также можете использовать _.ary() , чтобы установить arity функции (количество параметров, которые принимает функция) на 0 :

 const fn = (...args) => console.log(args)
const alwaysNull = _.ary(_.wrap(null, fn), 0)

fn(5) // 5
alwaysNull(1, 2) // null  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>  

И в вашем случае:

 const App = () => {
  const [selectedMovie, setSelectedMovie] = useState(null);

  const setSelectedMovieCalledWithNullOnly = _.wrap(setSelectedMovie, null);

  return (
    <>
      <AppHeader onSearchClick={setSelectedMovieCalledWithNullOnly)} />
      <AppBody selectedMovie={selectedMovie} onMovieSelect={setSelectedMovie} />
      <AppFooter />
    </>
  );
};