在函数组件中使用react-redux

最新推荐文章于 2024-09-03 21:21:23 发布

原创最新推荐文章于 2024-09-03 21:21:23 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react-redux #hooks

前端专栏收录该内容

45 篇文章

订阅专栏

这篇博客介绍了如何在React应用中创建并使用`redux/hooks.ts`文件来实现状态管理。通过`useSelector`和`useDispatch` hooks，从Redux store中获取和更新状态，如语言设置。在`header.tsx`组件中，展示了一个使用这些hooks的例子，包括从store中获取语言列表，使用`useTranslation`进行多语言处理，并通过菜单点击事件触发语言切换和添加新语言的action。这展示了React Redux Hooks在实际项目中的应用。

创建redux/hooks.ts文件

import {useSelector as useReduxSelector, TypedUseSelectorHook} from 'react-redux';
import { RootState } from './store';

export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;

store.js文件

const store = createStore(languageReducer);

export type RootState = ReturnType<typeof store.getState>

在header.tsx文件中使用hook

import React from "react";
import { useSelector } from "../../redux/hooks";  //useSelector从store中连接state数据
import { useDispatch } from "react-redux";
import { changeLanguageActionCreator, addLanguageActionCreator} from '../../redux/language/languageActions';
import {useTranslation} from 'react-i18next';

export const Header : React.FC = ()=>{
    const language = useSelector((state) => state.language);
    const languageList = useSelector((state) => state.languageList);

    const { t} = useTranslation();
    const dispatch = useDispatch();

    const menuClickHander = (e)=>{
        
        if(e.key === 'new'){
            dispatch(addLanguageActionCreator('新语言', 'new_lang'));
        }else{
            dispatch(changeLanguageActionCreator(e.key));
        }
        
    }
    return <Menu onClick={menuClickHander}>
                {languageList.map(l => <Menu.Item key={l.code}>{l.name}</Menu.Item>)}

                        <Menu.Item key={'new'}>{t('header.add_new_language')}</Menu.Item>
           </Menu>
}