React: Can this custom hook replace redux?

0

Issue

I was wondering if I really need Redux when I can just implement a simple custom hook?

for example this is my store.tsx:

//Initial state
var _customerDue = {
  startDate: moment().startOf('day').toISOString(),
  endDate: moment().endOf('day').toISOString(),
  buyer: undefined as Guid | undefined,
  viewModel: [] as SalesVM[]
}

export function useCustomerDue() {
  const [startDate, setStartDate] = useState(_customerDue.startDate);
  const [endDate, setEndDate] = useState(_customerDue.endDate);
  const [buyer, setBuyer] = useState(_customerDue.buyer);
  const [viewModel, setViewModel] = useState(_customerDue.viewModel);

  useEffect(() => {
    _customerDue.startDate = startDate;
    _customerDue.endDate = endDate;
    _customerDue.buyer = buyer;
    _customerDue.viewModel = viewModel;
  }, [startDate, endDate, buyer, viewModel]);

  return { startDate, setStartDate, endDate, setEndDate, buyer, setBuyer, viewModel, setViewModel };
}

Then I just call this in my react component:

const CustomerDue: React.FC = () => {
  const { startDate, setStartDate, endDate, setEndDate, buyer, setBuyer, viewModel, setViewModel } = useCustomerDue();
  .....

Is this code viable to replace Redux? Is this code performance fast and efficient? What are the cases when we should use Redux rather than this simple custom hook?

I mean because writing Redux store is a bit too much. Also the switch case on the reducer is not neat.


EDIT

As @JLRishe said, Redux it might not necessary for my application.

For those who might find this approach helpful, for complex manipulation, we can also export functions for the manipulation.

For example:

export function useCustomerDue() {
  const [startDate, setStartDate] = useState(_customerDue.startDate);
  const [endDate, setEndDate] = useState(_customerDue.endDate);
  const [buyer, setBuyer] = useState(_customerDue.buyer);
  const [viewModel, setViewModel] = useState(_customerDue.viewModel);

  useEffect(() => {
    _customerDue.startDate = startDate;
    _customerDue.endDate = endDate;
    _customerDue.buyer = buyer;
    _customerDue.viewModel = viewModel;
  }, [startDate, endDate, buyer, viewModel]);

  const complexManipulation = (value: ComplexValue) => {
      //Do complex operation, and set states
  }

  return { startDate, setStartDate, endDate, setEndDate, buyer, setBuyer, viewModel, setViewModel, complexManipulation };
}

I hope this helps.


WEAKNESS

As @Nick said, if we use the hook in different components, they are not sync.

Solution

I would say no. Because the custom hook is called in each component independently.

This means you need to store the global value somewhere (which is what Redux does). You can custom create a global variable within your custom hook code file. You can refer to this SO answer for an idea.

Personally, I use Reactive Variables of Apollo Client v3, which is very easy to use for simple use cases. I’ve used Redux myself with redux-observable and all, but I’m currently using GraphQL with Apollo. If you’re looking to replace redux in your code, I suggest you to have a look into it. I found it to be a better solution than redux for managing global states.

Answered By – Ziwon

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More