Как создать функцию с фиксированным единственным аргументом, который игнорирует аргументы обратного вызова - PullRequest
Новая
       23

Как создать функцию с фиксированным единственным аргументом, который игнорирует аргументы обратного вызова

1 голос
/ 01 апреля 2019

У меня есть этот кусок кода: 

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?

1 Ответ

1 голос
/ 01 апреля 2019

Вы можете использовать _.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(), чтобы установить арность функции (количество параметров, которые принимает функция) равными 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 />
    </>
  );
};
...