接続の代わりにuseSelector useDispatchを使用する

前言react hooksがますます火をつけるにつれて、react-reduxも7.1(https://react-redux.js.org/ap...)を発表した.
まずいくつかのAPIです

useSelector()

const result : any = useSelector(selector : Function, equalityFn? : Function)

主な役割:reduxのstoreオブジェクトからデータを抽出する(state).
注:セレクタ関数は、任意の時点で複数回実行される可能性があるため、純粋な関数である必要があります.

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

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

useDispatch()

const dispatch = useDispatch()

は、Redux storeのdispatch関数への参照を返します.必要に応じて使用できます.

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

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()

  return (
    

      {value}
       dispatch({ type: 'increment-counter' })}>
        Increment counter
      
    
  )
}

コールバック使用dispatchをサブアセンブリに渡す場合は、参照が変更されたため、サブアセンブリが不要に表示される可能性があるため、コールバックuseCallbackを使用することを推奨します.

import React, { useCallback } from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()
  const incrementCounter = useCallback(
    () => dispatch({ type: 'increment-counter' }),
    [dispatch]
  )

  return (
    

      {value}
      
    
  )
}

export const MyIncrementButton = React.memo(({ onIncrement }) => (
  Increment counter
))

useStore()

const store = useStore()

このHookは、redux コンポーネントのstoreオブジェクトの参照を返す.
このフックは長く使われないはずです.useSelectorはあなたの第一選択とすべきです.しかし、時には役に立つこともあります.例を見てみましょう

import React from 'react'
import { useStore } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const store = useStore()

  //       !            .
  //   store  state  ，         
  return 
{store.getState()}
}

dvaでの使用方法dvaは[email protected][1]のbetaバージョンでこれらのAPIをリリースしました.もし私たちが彼を使用したいなら、まず指定されたバージョンの

yarn add [email protected] 
// or
npm install [email protected]

そしてこのように使う

import { useSelector, useDispatch } from 'dva';

dvaバージョンをアップグレードしたくない場合はインストールが必要です

yarn add [email protected]

そしてこのように使う

import { useSelector, useDispatch } from 'react-redux';

まず、元のdvaの書き方を見て、まずuser modelを定義します.

// 1.user.js ==>model
export default {
  namespace: 'user',
  state: {
    userInfo:null,
  },
  effects: {
      *fetchUser({paylaod},{call,put}){
          const res = yield(api,payload)
          yield put({
            type: 'save',
            payload: {
                userInfo:res   
            },
          });
      }
  },
  reducers:{
      save(state, { payload }) {
        return {
            ...state,
            ...payload,
        };
      },
  }
}

そしてページで使用

import {connect} from 'dva'

const Home = props=>{
    //     
    const {user,loading,dispatch} = props
    
    //     
    useEffect(()=>{
        dispatch({
            type:'user/fetchUser',payload:{}
        })
    },[])
    
    //     
    if(loading) return 
loading...
    return (
        
{user.name}

    )
}

export default connect(({loading,user})=>({
    loading:loading.effects['user/fetchUser'],
    user:user.userInfo
}))(Home) 
 
connect              ，        。
       props    ，connect       
 
 
      useDispatch useSelector        
 
 
import {useDispatch,useSelector} from 'dva'

const Home = props=>{
    
    const dispatch = useDispatch()
    
    const loadingEffect = useSelector(state =>state.loading);
    const loading = loadingEffect.effects['user/fetchUser'];
    const user = useSelector(state=>state.user.userInfo)
    
    //     
    useEffect(()=>{
        dispatch({
            type:'user/fetchUser',payload:{}
        })
    },[])
    
    //     
    if(loading) return 
loading...
    return (
        
{user.name}

    )
}

export default Home 
 
  useSelector useDispatch   connect
 
 
  
 
 
 
  
       の わりにuseSelector useDispatchを  する