Redux react-redux hooks使用篇

hooks中使用redux

详细参考React-Redux 官方 Hooks 文档说明
前提，在react应用中已经成功注入了redux。(之前已经写过了怎么注入redux的文章)只是在使用上hooks和在calss组件中使用有所区别,hooks中主要使用以下两个react-reudx暴露的方法，就可以在函数组件中获取到store对象，以及dispatch方法

useSelector()

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

通过传入 selector 函数，你就可以从从 Redux 的 store 中获取 状态(state) 数据。

警告: selector 函数应该是个纯函数，因为，在任意的时间点，它可能会被执行很多次。

useDispatch()

const dispatch = useDispatch() //获取dispatch方法

代码块

import {
      Button } from 'antd'
import React from 'react'
// import { createHashHistory } from 'history'
import {
      withRouter } from 'react-router-dom'
import {
      useSelector, useDispatch } from 'react-redux' //====================
import aT from '../store/actions/actionEntry' //=========action module
import './login.css'
const per = ['admin', 'editer', 'reader'] //随机权限

function Login(props) {
     
    const store = useSelector(state => {
     
        return Object.assign({
     }, state)
    })
    const dispatch = useDispatch()
    let click = async () => {
     
        //Math.random()*52 + 1    //现在这个数就 >=1 且 <53
        await dispatch({
      type: aT.checkLogin, isLogin: true, permissions: per[Math.floor(Math.random() * 3)] })
        // createHashHistory().push('/index')
        props.history.push({
      pathname: store.login_reducer.path })
    }
    return (
        <div style={
     {
     
            border: '4px solid white',
            width: '300px',
            padding: '100px 50px',
            textAlign: 'center',
            backgroundColor: 'rgba(0,0,0,0.4)',
            margin: '0 auto',
            position: 'relative',
            top: '300px',
            left: '300px'
        }}>
            <div style={
     {
     
                color: 'yellow',
                fontSize: '18px',
                position: 'absolute',
                width: '300px',
                textAlign: 'center',
                top: '10px',
                left: '0'
            }}>登 录 界 面</div>
            <Button onClick={
     click}>登 录</Button>
        </div>
    )
}
export default withRouter(Login)

自己在实际例子中的使用，简单的页面登录，大致就是这样使用，很简单就可以入手，有问题可以看看我之前写的，注入redux，连着的代码