استفاده از Hook ها در Redux

قبل از اینکه react-redux نسخه 7.1.0 اش رو ارائه بده پکیج‌های زیادی واسه کانفیگ hook در ریداکس نوشته شده بود ولی خب با ارئه‌ی نسخه جدید خیلی از این پکیج‌ها از رده خارج شدن، من در این مقاله قصد دارم استفاده از hook ها در redux رو به شما آموزش بدم، اول از همه باید بگم که کانفیگ create store هیچ تغییری نکرده و تنها قابلیت connect در کامپوننت‌‌ها که از مکانیزم HOC یا higher-order component استفاده میکرده رو حذف کرده و گفته که از use های hook استفاده کنید.

https://react-redux.js.org/next/api/hooks

دو تا فانکشن خیلی کاربردیش useDispatch و useSelector که در ادامه روش استفادش رو واستون توضیح میدم.

فانکشن useDispatch

اگه قصد دارین از useDispatch استفاده کنید، دور mapDispatchToProps رو خط بکشید، چون دیگه کاربردی واستون نداره.

یه مثال ساده

import React from 'react';
import { useDispatch } from 'react-redux';

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch();
  return (
    <div>
      <span>{value}</span>
      <button ={() => dispatch({ type: 'increment-counter' })}>Increment counter</button>
    </div>
  )
}

فانکشن useSelector

همینطور اگه قصد دارین از useSelector استفاده کنید، دور mapStateToProps رو خط بکشید، چون دیگه اینم کاربردی واستون نداره.

یه مثال ساده

import React from 'react';
import { useSelector } from 'react-redux';

export const CounterComponent = () => {
  const counter = useSelector(state => state.counter);
  return <div>{counter}</div>
}

نکته جالبی که دوستم سعید جان راجب useSelector بهم گفت اینه که این فانکشن قابلیتی مشابه قابلیت memo داره، به این صورت که در شرایطی که value اون counter مثال بالا تغییر کنه، کامپوننت re-render میشه