Redux — Не нужен! Заменяем с помощью useContext и useReducer в React?

[trueClearThinker]

Расскажите, пожалуйста, как вы тестируете подобные компоненты? В нашей компании мы тоже решили переходить на хуки и столкнулись с проблемой того, что компонент надо заворачивать в redux-провайдер, что не всегда удобно. С react connect + компонент, принимающий св-ва такой проблемы нет.

[it-efrem]

переходить на хуки и столкнулись с проблемой того, что компонент надо заворачивать в redux-провайдер

Честно говоря не понял. Вы хотите сказать, что переписываете текущее приложение с Redux на хуки и т.к. делаете это итеративно — появляется необходимость синхронизировать хранилище Redux с новым кастомным reducer'ом?

[trueClearThinker]

Да, и это тоже. Но я имел в виду то, что приходится тестировать все вместе вместо того, чтобы протестировать только функционал компонента.

[alexesDev]

Я так стал делать.

const MyComponent = ({ useFetch }) => {
  const data = useFetch(...);
  // ...
}

MyComponent.defaultProps = {
  useFetch,
};

// test
const useFetch = jest.fn(() => []);
const tree = renderer(<MyComponent useFetch={useFetch} />);

Если не нравится defaultProps, то jest.mock. Но тогда тест неявно знает, что внутри кода, а так явно.

[it-efrem]

Вот, что говорит документация о тестировании:
— ru.reactjs.org/docs/testing-recipes.html
— ru.reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks

[MaZaAa]

React + Mobx и кайфуйте на здоровье.

[dfuse]

https://ru.reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down вы прям Америку открыли )))

[difuks]

Не могли бы Вы пояснять, что происходит в данном примере? Почему стрелочная функция просто «висит» внутри onClick? Попытался скопировать данный код в IDE и насчитал минимум 4 синтаксических ошибки.

Код

...
return (
            // Теперь мы хотим обновить данные внутри дерева
            // для этого нам нужно как-то получить самое актуальное состояние
            // этого дерева в момент вызова экшена, можно сделать это через callback:
            <div onClick={() => {
            // Сделаем так, чтобы экшен возвращал callback, 
            // который внутри testReducer будет передавать самый актуальный state
             (state) => {
             const {tree_1} = state;

             return {
                tree_1: {
                    ...tree_1,
                    tree_2_1: {
                        ...tree_1.tree_2_1,
                        tree_3_1: 'tree_3_1 UPDATE'
                    },
                },
            };
            }>
                {JSON.stringify(state)}
            </div>
    )
...

[mayorovp]

В этом примере "происходит" самый обычный обработчик события на JSX, только закрывающую фигурную скобку автор забыл.

[difuks]

Очень странно, я не писал этот комментарий) И вообще не читал эту статью. Почему комментарий оказался здесь от моего имени - не понимаю

[difuks]

Кажется, это мой комментарий 4-летний давности. Почему-то отображается, что был добавлен 52 минуты назад. Раз уж я тут - перечитал код. Тут не хватает двух фигурных скобок, а самое главное - та самая "висящая" стрелочная функция не обёрнута в dispatch:

Код

return (
		// Теперь мы хотим обновить данные внутри дерева
		// для этого нам нужно как-то получить самое актуальное состояние
		// этого дерева в момент вызова экшена, можно сделать это через callback:
		<div
			onClick={() => {
				// Сделаем так, чтобы экшен возвращал callback,
				// который внутри testReducer будет передавать самый актуальный state
				dispatch(state => {
					const { tree_1 } = state;

					return {
						tree_1: {
							...tree_1,
							tree_2_1: {
								...tree_1.tree_2_1,
								tree_3_1: `tree_3_1 UPDATE`,
							},
						},
					};
				});
			}}
		>
			{JSON.stringify(state)}
		</div>
	);