React-Hooks中redux的使用案例

1、首先安装redux，自己去网上查询

2、创建store文件夹：

index.tx

import {combineReducers, applyMiddleware, createStore} from 'redux'
import commonReducer from "./commonReducer";
import thunk from 'redux-thunk'

const appReducer = combineReducers({
    common: commonReducer
})
export default createStore(appReducer, applyMiddleware(thunk))

commonReducer.ts

export default function commonReducer(
    state = {
        aList: []
    },
    action: any
) {
    switch (action.type) {
        case 'UPDATE_ALIST':
            return {
                ...state,
                aList: action.value
            }
        default:
            return state;
    }
}

action.ts

export const updateAList = (val: any) => {
    return {
        type: 'UPDATE_ALIST',
        value: val
    }
}

3、在app.tsx中进行注入store

import React, { Suspense, lazy, useEffect, useState } from 'react';
import { BrowserRouter, Route, Redirect } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import { ConfigProvider, Spin, Result, Button, Input, message } from 'antd';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/locale/zh_CN';

import RoutePath from './RoutePath'

export default () => {

  return <ConfigProvider locale={locale}>
      <Provider store={store}>
        <RoutePath />
      </Provider>
    </ConfigProvider>
  </GlobalConfigProvider>
};

4、在单页面中使用

4-1 向store中添加数据

import React, {useEffect, useReducer, useRef, useState} from "react";

import {useDispatch} from "react-redux";

const ReactHook = () => {
    const dispatch = useDispatch()
   
    useEffect(() => {
        let list = [1, 2, 3, 4]
        dispatch(updateAList(list))
    }, [])

    return (
        <>
         ....
        </>
    )

}

export default ReactHook

4-2 从store中获取数据

import React, {useEffect, useReducer, useRef, useState} from "react";

import {useSelector} from "react-redux";

const ReactHook = () => {

    const {aList} = useSelector(state => state['common'])

    useEffect(() => {
       console.log('aList:', alist)
    }, [])

    return (
        <>
         ....
        </>
    )

}

export default ReactHook