reactjs - React フック: Redux などの共有状態管理に役立ちますか?

Question

React フックに関する誇大宣伝があります。情報が多すぎてまだわかりません: フックの出現は、Redux のようなライブラリがゴミに捨てられることを意味しますか?

これまでのところ、フックはステートフルな機能コンポーネントに適していると理解していましたが、共有状態はどうでしょうか?

Answer 1

フックとコンテキストは、Redux の代わりにアプリケーションの状態を管理するためのものではありません。

コンテキストは、大規模で高度にネストされたエンタープライズ レベルのアプリケーションで、親から子に情報を伝達する際に発生する可能性がある悪夢を解決するという点で、小道具に似ています。欠点は、Context がもう少し複雑で、設定が面倒なことです。

フックを使用すると、クラスベースのコンポーネントに変換することなく、アプリケーションの状態にフックできる機能コンポーネントを使用できるようになります。

useReducer混乱は、従来の Redux セットアップなしで、フックを使用して Redux から機能を取得できることにあります。

たとえば、ブログ アプリケーションに取り組んでいて、ブログ投稿を更新する機能を追加したい場合は、次のuseReducerように適用できます。

const blogReducer = (state, action) => {
  switch (action.type) {
    case 'add_blogpost':
      return [...state, { title: `Blog Post #${state.length + 1}` }];
    default:
      return state;
  }
};

したがって、それはあなたのレデューサーであり、次のように適用します。

export const BlogProvider = ({ children }) => {
  const [blogPosts, dispatch] = useReducer(blogReducer, []);

アクション オブジェクトをディスパッチするヘルパー関数を一時的に作成できます。

const addBlogPost = () => {
    dispatch({ type: 'add_blogpost' });
  };

それを value prop に追加する必要があります'add_blogpost'。とにかく、これは Redux システム全体を使用せずに機能コンポーネントで Redux の側面を利用する単なる紛らわしい方法ですが、これも代替ではありません。