Redux Hooksの使い方を詳しく解説した記事

この記事では、Redux Hooks の使用方法について詳しく説明します。皆様のお役に立てれば幸いです。

Redux フック

##Redux のフックの概要

# #以前の redux 開発では、コンポーネントを redux と結合するために、react-redux ライブラリで connect を使用しました:

しかし、このメソッドは返された高次コンポーネントを結合するために高階関数を使用する必要があります。 ;

そして次のように記述する必要があります:mapStateToProps および mapDispatchToProps マッピング関数。具体的な使用方法は前の記事で説明されています; [関連する推奨事項:

Redis ビデオ チュートリアル

、

プログラミング ビデオ ] Redux7.1 からは Hook メソッドが提供されており、関数コンポーネント内に connect 関数や対応するマッピング関数を記述する必要はありません。 useSelector

の機能は、状態をコンポーネントにマップすることです

:

パラメータ 1: コールバック関数に渡す必要があり、状態はコールバック関数に渡されます。コールバック関数 戻り値はオブジェクトである必要があります。オブジェクト内で使用するデータを記述します。返されたオブジェクトを直接分解して、使用したい状態のデータを取得できます。

const { counter } = useSelector((state) => {
  return {
    counter: state.counter.counter
  }
})

パラメータ 2: 比較可能 コンポーネントが再レンダリングされるかどうかを決定します。

useSelector は、デフォルトで返される 2 つのオブジェクトを比較して、それらが等しいかどうかを確認します

;

どのように比較できますか?

useSelector の 2 番目のパラメーターで、react-redux ライブラリの shallowEqual

関数を渡すことで比較できます

import { shallowEqual } from 'react-redux'

const { counter } = useSelector((state) => ({
  counter: state.counter.counter
}), shallowEqual)

つまり、完全に等しい 2 つのオブジェクトを返しても再レンダリングは発生しません。

useDispatch

は非常に簡単で、 useDispatch Hook を使用すると、ディスパッチ関数を直接取得できます。その後、それをコンポーネント内で直接使用できます

;

const dispatch = useDispatch()

useStore を通じて現在のストア オブジェクトを取得することもできます (理解するだけで、実際にはそうではありません)ストア オブジェクトを直接操作することをお勧めします);

Redux でのフックの使用

---

# Redux のフックを使用して、アプリ コンポーネントを作成し、アプリのサブコンポーネントでメッセージを変更するケースを実装します。

まず、単純なストアを作成します

// store/modules/counter.js

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    counter: 10,
    message: "Hello World"
  },
  reducers: {
    changeNumberAction(state, { payload }) {
      state.counter = state.counter + payload
    },
    changeMessageAction(state,  {payload }) {
      state.message = payload
    }
  }
})

export const { changeNumberAction, changeMessageAction } = counterSlice.actions

export default counterSlice.reducer

// store/index.js

import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "./modules/counter"

const store = configureStore({
  reducer: {
    counter: counterSlice
  }
})

export default store

使用するReact-redux ライブラリでは、App コンポーネントをラップするために Provider をインポートする必要があります。

import React from "react"
import ReactDOM from "react-dom/client"
import { Provider } from "react-redux"
import App from "./12_Redux中的Hooks/App"
import store from "./12_Redux中的Hooks/store"

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(
  <Provider store={store}>
    <App/>
  </Provider>
)

コンポーネント内で useSelector と useDispatch を使用して、ストア内のデータの取得とデータの変更の操作を実装します。ストア内

import React, { memo } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { changeMessageAction, changeNumberAction } from './store/modules/counter'

// 子组件Home
const Home = memo(() => {
  console.log("Home组件重新渲染")
  
  // 通过useSelector获取到store中的数据
  const { message } = useSelector((state) => ({
    message: state.counter.message
  }))

  // useDispatch获取到dispatch函数
  const dispatch = useDispatch()
  function changeMessage() {
    dispatch(changeMessageAction("Hello ChenYq"))
  }

  return (
    <div>
      <h2>{message}</h2>
      <button onClick={changeMessage}>修改message</button>
    </div>
  )
})


// 根组件App
const App = memo(() => {
  console.log("App组件重新渲染")
  
  // 通过useSelector获取到store中的数据
  const { counter } = useSelector((state) => ({
    counter: state.counter.counter
  }))

  // useDispatch获取到dispatch函数
  const dispatch = useDispatch()
  function changeNumber(num) {
    dispatch(changeNumberAction(num))
  }
  
  return (
    <div>
      <h2>当前计数: {counter}</h2>
      <button onClick={() => changeNumber(1)}>+1</button>
      <button onClick={() => changeNumber(-1)}>-1</button>

      <Home/>
    </div>
  )
})

export default App

ストア内のデータをコンポーネントで使用および変更しましたが、小さな問題が発生しました (

パフォーマンスの最適化

)

App コンポーネントでカウンターが変更されると、App コンポーネントはこれを再レンダリングします。問題はありませんが、Home コンポーネントはメッセージを使用し、カウンターを使用しません。再レンダリングされます。同様に、メッセージが Home サブコンポーネントで変更された場合、ルート コンポーネント App も再レンダリングされます。これは、デフォルトでは UseSelector が監視される状態全体であるためです。状態が変化すると、コンポーネントが再レンダリングされるようにするこの問題を解決するには、useSelector の 2 番目のパラメーターを使用して、再レンダリングが必要かどうかを制御する必要があります。useSelector 関数を使用するだけです。 # を渡すだけです。反応 Redux ライブラリの ##shallowEqual 関数を使用すると、内部で浅い比較が自動的に実行され、使用される状態のデータが変更された場合にのみ再レンダリングされます#

import React, { memo } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'
import { changeMessageAction, changeNumberAction } from './store/modules/counter'

// 子组件Home
const Home = memo(() => {
  console.log("Home组件重新渲染")

  const { message } = useSelector((state) => ({
    message: state.counter.message
  }), shallowEqual)

  const dispatch = useDispatch()
  function changeMessage() {
    dispatch(changeMessageAction("Hello ChenYq"))
  }

  return (
    <div>
      <h2>{message}</h2>
      <button onClick={changeMessage}>修改message</button>
    </div>
  )
})


// 根组件App
const App = memo(() => {
  console.log("App组件重新渲染")

  // 通过useSelector获取到store中的数据
  const { counter } = useSelector((state) => ({
    counter: state.counter.counter
  }), shallowEqual)

  // useDispatch获取到dispatch函数
  const dispatch = useDispatch()
  function changeNumber(num) {
    dispatch(changeNumberAction(num))
  }
  
  return (
    <div>
      <h2>当前计数: {counter}</h2>
      <button onClick={() => changeNumber(1)}>+1</button>
      <button onClick={() => changeNumber(-1)}>-1</button>

      <Home/>
    </div>
  )
})

export default App

詳細プログラミング関連の知識については、

プログラミング教育

をご覧ください。 ！

以上がRedux Hooksの使い方を詳しく解説した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。