Для того, щоб відтворити this.setStateповедінку злиття з компонентів класу, React документи рекомендують використовувати функціональну форму useStateз поширенням об'єкта - немає необхідності для useReducer:
setState(prevState => {
return {...prevState, loading, data};
});
Тепер два стани об’єднані в одне, що заощадить цикл рендерингу.
Є ще одна перевага з одним об’єктом стану: loadingі dataце залежні стани. Недійсні зміни стану стають більш очевидними, коли стан складається:
setState({ loading: true, data });
Ви можете ще краще забезпечити стійкі стану на 1.) , що робить стан - loading, success, errorі т.д. - явно в вашій державі і 2.) з використанням useReducerдержавної логіки инкапсулировать в редукторі:
const useData = () => {
const [state, dispatch] = useReducer(reducer, );
useEffect(() => {
api.get('/people').then(test => {
if (test.ok) dispatch(["success", test.data.results]);
});
}, []);
};
const reducer = (state, [status, payload]) => {
if (status === "success") return { ...state, data: payload, status };
else if (status === "loading") return { ...state, data: undefined, status };
return state;
};
const App = () => {
const { data, status } = useData();
return status === "loading" ? <div> Loading... </div> : (
)
}
const useData = () => {
const [state, dispatch] = useReducer(reducer, {
data: undefined,
status: "loading"
});
useEffect(() => {
fetchData_fakeApi().then(test => {
if (test.ok) dispatch(["success", test.data.results]);
});
}, []);
return state;
};
const reducer = (state, [status, payload]) => {
if (status === "success") return { ...state, data: payload, status };
else if (status === "loading") return { ...state, data: undefined, status };
else return state;
};
const App = () => {
const { data, status } = useData();
const count = useRenderCount();
const countStr = `Re-rendered ${count.current} times`;
return status === "loading" ? (
<div> Loading (3 sec)... {countStr} </div>
) : (
<div>
Finished. Data: {JSON.stringify(data)}, {countStr}
</div>
);
}
const useRenderCount = () => {
const renderCount = useRef(0);
useEffect(() => {
renderCount.current += 1;
});
return renderCount;
};
const fetchData_fakeApi = () =>
new Promise(resolve =>
setTimeout(() => resolve({ ok: true, data: { results: [1, 2, 3] } }), 3000)
);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>
PS: Переконайтеся, що користувацькі хуки ставляться перед префіксомuse ( useDataзамість getData). Також переданий зворотний дзвінок не useEffectможе бути async.
useReducer