React redux-react-hook

redux-react-hook

import React, { useState, useEffect, useCallback } from 'react'
import { useDispatch, useMappedState } from 'redux-react-hook';
import './styles.less'
import { hook } from '@/actions/hook'
import _ from 'loadsh'

export default function Counter() {
    const mapState = useCallback(state => {
        return {
            hookData: state.hook.hookData, // 获取 hookData 的 数据
        }
    })

    // 从 store 中读取 dispatch
    const dispatch = useDispatch()

    // data: 获取的所有数据
    const data = useMappedState(mapState)

    useEffect(() => {
    	// 调用 actions 里面hook的方法
        dispatch(hook())
            .then(res => {
                console.log(res, 'res');
            })
    }, [])

    console.log(data, 'data');

    return (
        <div className='hook'>
            {
                _.get(data, 'hookData', []).map((v, k) => {
                    return (
                        <h1 key={k}>{v.name}</h1>
                    )
                })
            }
        </div>
    )
}

引入

import React from 'react';
import ReactDOM from 'react-dom';

import 'antd/dist/antd.less';
import '@/styles/rem.js';
import '@/styles/iconfont.css'
import '@/styles/reset.css';
import './index.less';

import { StoreContext } from 'redux-react-hook'
import Router from './router'  // 路由
import { store } from './store'  //store
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'   //数据持久化
import { PersistGate } from 'redux-persist/lib/integration/react'

ReactDOM.render(
    <Provider store={store}>
        <StoreContext.Provider value={store}>
            <PersistGate loading={null} persistor={persistStore(store)}>
                <Router />
            </PersistGate>
        </StoreContext.Provider>
    </Provider>
    , document.getElementById('root'));