Redux hooks, useSelector e useDispatch que são melhores do que conectar

Quem já usou o redux sabe conectar, mas toda vez que usar isso, temos que escrever um monte de código?

do seguinte modo,

// const mapStateToProps = state => ({
    
    
//     banner: state.recommend.banner
// })
// const mapPropsToProp = dispatch => ({
    
    
//     getBanner: (url)=>{dispatch(getBannerAction(url))}
// // // })
// // export default connect(mapStateToProps,mapPropsToProp)(memo(MHDiscover))

E ao exportar, você deve usar o pacote de conexão, o que é particularmente problemático.

Recomendar redux hook para perceber nosso acesso aos dados redux e modificações mais convenientes,

Olhe para o código primeiro

const dispatch = useDispatch();
  const recommend = useSelector(
    (state) => ({
    
    
      banner: state.recommend.banner,
    }),
    shallowEqual
  );

useSelector, semelhante ao nosso mapStateToProps, é usado para obter dados de estado, mas é mais conveniente e conciso.
Ele passa dois parâmetros, o primeiro é uma função, conforme mostrado no estado, que retorna um objeto, no qual os dados de redux podem ser obtidos através do estado. O segundo valor é, na verdade, a otimização de desempenho, que é usada para decidir se deve renderizar novamente o componente.
Cada vez que você modificar os dados de redux, useSelector irá comparar os dois objetos antes e depois por padrão, como {banner} na figura. Embora você não tenha modificado esses dados, você ainda retornará o novo {banner}, então useSelector irá comparar esses dois objetos. Compare cada objeto, como compará-lo, apenas diretamente ===, ou seja, os dois objetos são exatamente os mesmos, então não há necessidade de causar a re-renderização da montagem.
Você pode ver o código-fonte.

Por padrão, refEuqality é passado. O que é isso,

simples e rude.
Mas sabemos que mesmo que os dois objetos pareçam iguais, seus endereços de heap não são os mesmos, então eles definitivamente não são iguais quando são comparados. Então, o papel do segundo parâmetro nasce, e o shallowEqual fornecido a nós por react -redux (Uma função de comparação é implementada no React. É usada para comparar objetos conncet para determinar se deve ser renderizada novamente. Em seguida, o react-redux também nos fornece uma função semelhante.) Passe shallowEquall como o segundo parâmetro Enter, useSelector irá use esta função para comparar, esta função é uma comparação superficial (se você estiver interessado, você pode entender o código-fonte), então useSelector é realmente útil.

useDispatch, como o nome sugere, é usado para despachar ações, isso é apenas use, o efeito é o mesmo que conncet.

Você também pode obter o objeto Store inteiro por meio de useSotre.
const Store = useStore ()