Skip to content

HollyPony/react-use-state-reducer

Folders and files

NameName
Last commit message
Last commit date
Apr 11, 2020
Apr 11, 2020
Apr 11, 2020
Apr 11, 2020
Apr 11, 2020
Apr 11, 2020
Apr 11, 2020
Apr 11, 2020
Apr 11, 2020
Apr 11, 2020
Mar 31, 2021
Apr 25, 2020

Repository files navigation

React-Use-State-Reducer

A hook to avoid multiple declaration of const [xLoading, setXLoading] = useState(false)

Sample

npm i react-use-state-reducer

import React from "react";
import useStateReducer from "react-use-state-reducer";

export default function App() {
  const [state, dispatch] = useStateReducer({
    init: true,
    fetch: false
  });

  React.useEffect(() => {
    // /!\ Don't do that at home !! `setTimeout` had issues with React/hooks : https://medium.com/javascript-in-plain-english/usetimeout-react-hook-3cc58b94af1f
    setTimeout(() => dispatch(false, "init"), 1000);
  }, [dispatch]);

  if (state["init"]) {
    return <span>Initializing</span>;
  }

  return (
    <div>
      <span>{state["fetch"] ? "fetching" : "fetched"}</span>
      <span>{state[undefined]}</span>
      <button onClick={() => dispatch(true, "fetch")}>Start fetch</button>
      <button onClick={() => dispatch(false, "fetch")}>Stop fetch</button>
    </div>
  );
}


ReactDOM.render(<App />, document.getElementById("root"));