לפני כמה שבועות הסברתי לאנשים בקורס React על Redux ועל כל הדברים המדליקים שאפשר לעשות איתה. ההתחלה היתה מלהיבה וכולם אפילו הצליחו לשרוד את הסיפור על ה Stores והפונקציה reducer. ואז הגענו לחבר את כל העסק הזה ל React ויכולתי לראות קבוצה שלמה של תלמידים מרוכזים נעלמת והופכת לאוסף של מבטים מיואשים. והאמת? אני די מבין אותם.

נניח שיש לי State של אפליקציה שנראה ככה:

const initialState = {
  home: [
    { id: 1, text: "buy stuff", done: false },
    { id: 2, text: "clean the kitchen", done: false },
    { id: 3, text: "cook dinner", done: true }
  ],
  work: [
    { id: 4, text: "prepare webinar text", done: true },
    { id: 5, text: "write daily post", done: false },
    { id: 6, text: "prepare slides for talk", done: false }
  ],
  hobbies: [{ id: 7, text: "write a cool tetris game", done: false }]
};

ואני רוצה לכתוב קומפוננטת ריאקט שתציג את כל המשימות בקבוצה מסוימת, עד לא מזמן הייתי צריך לכתוב קוד שנראה כך:

const TaskGroup = connect((state, ownProps) => ({
  tasks: state[ownProps.group],
  group: ownProps.group
}))(function TaskGroup({ tasks, group }) {
  return (
    <div>
      <h2>{group}</h2>
      <ul>
        {tasks.map(task => (
          <li>{task.text}</li>
        ))}
      </ul>
    </div>
  );
});

ואני כותב את זה על הלוח ובעצמי לא מבין למה דברים צריכים להיראות ככה, מאיפה כל הסוגריים האלה ומי יום אחד יצטרך לתחזק את הטירוף הזה. וניסיתי, באמת שניסיתי - הצעתי להם להוציא החוצה את הפוקנציה mapStateToProps לפונקציה נפרדת כמו שכולם עושים, או לעצום עיניים בזמן שכותבים את הקוד כמו שכולם עושים, אבל כלום לא עזר.

והנה בזמן שאני כותב את הפוסט הזה ומקטר יושבים אנשים ב react-redux ועושים עבודה. עבודה נפלאה, עבודה שעושה את העבודה שלי הרבה יותר קלה. בקיצור גם הם עברו ל React Hooks. עכשיו אנחנו כבר יכולים לוותר על connect ועל החתימה המביכה שלו ולכתוב קוד שנראה כך:

function TaskGroup({ group }) {
  const tasks = useSelector(state => state[group]);

  return (
    <div>
      <h2>{group}</h2>
      <ul>
        {tasks.map(task => (
          <li>{task.text}</li>
        ))}
      </ul>
    </div>
  );
}

הפקודה useSelector מושכת מידע מה State ומחזירה אותו, וחוסכת לנו את כל העבודה המעיקה עם connect. וכן יש גם useDispatch שמחזירה את הפונקציה dispatch. פרטים נוספים ודוגמאות בתיעוד https://react-redux.js.org/api/hooks.