ts版本react reducer

喜欢ヅ旅行 2022-08-28 14:50 163阅读 0赞

定义

>     // action-type的类型
>     export const UPDATE_EXPANDEDROW = 'UPDATE_EXPANDEDROW';
>     // state的类型
>     export type RowkeyType = PrimaryTableProps['expandedRowKeys'];
>     // action的类型
>     type ExpandAction = { type?: typeof UPDATE_EXPANDEDROW; payload?: RowkeyType };
>     // reducer 的类型
>     export type ExpandReducer = React.Reducer<RowkeyType, ExpandAction>;
>     // 创建上下文实例
>     export const ExpandContext: Context<{
>       state: RowkeyType;
>       dispatch?: React.Dispatch<ExpandAction>;
>     }> = createContext({ state: [] });
>     
>     // reducer
>     export const reducer: ExpandReducer = (state, action) => {
>       switch (action.type) {
>         case UPDATE_EXPANDEDROW:
>           return action.payload;
>         default:
>           return state;
>       }
>     };
> 
> 注入 
> 
>     const [state, dispatch] = useReducer<ExpandReducer>(reducer, innerExpandRowKeys);
>       return (
>         <ExpandContext.Provider value={
>         { state, dispatch }}>
>           <div> ....
>         </ExpandContext.Provider>
>       );
> 
> 使用 
> 
>     const { dispatch } = useContext(ExpandContext); 
>     dispatch({ type: UPDATE_EXPANDEDROW, payload: thisExpandRowKeysNew });

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 react dva reducers用法个人总结

一、前言之前总结，本人的项目中，用`dispatch({})`方法调用了另一个js里的`effects`里的方法，其中有段`yield put({ type: 'upd

快来打我*/ 2024年03月27日 11:29/ 0 赞/ 54 阅读

相关 React ts 项目搭建

> React 是一个用于构建用户界面的 JavaScript 库。使用 create-react-app 创建项目全局安装 create-react-app

朴灿烈づ我的快乐病毒、/ 2023年07月09日 04:23/ 0 赞/ 42 阅读

相关 [react] react 学习(一) | 创建react+ts+cesium项目配置webpack

前言准备最近抽空学习一下react框架，作为一名gisr 职业发展也不能仅局限gis，能够结合gis+web前端比单一研究gis带来的收益更高。为什么选择react

桃扇骨/ 2022年12月22日 04:38/ 0 赞/ 673 阅读

相关 ts版本react reducer

定义 > // action-type的类型 > export const UPDATE_EXPANDEDROW = 'UPDATE_EXPANDEDROW

喜欢ヅ旅行/ 2022年08月28日 14:50/ 0 赞/ 163 阅读

相关 react数据之dispatch,reducer

1.之前写了一篇fetch的简单用法，实际项目中数据比那个要复杂，下面看一下通过dispatch和reducer来控制数据的更新； 2.还是以上一个添加分组的组件为例：首

谁践踏了优雅/ 2022年06月08日 08:43/ 0 赞/ 213 阅读

相关 react数据之dispatch,reducer

1.之前写了一篇fetch的简单用法，实际项目中数据比那个要复杂，下面看一下通过dispatch和reducer来控制数据的更新； 2.还是以上一个添加分组的组件为例：首

Love The Way You Lie/ 2022年06月08日 08:43/ 0 赞/ 313 阅读

相关 react ts wepack分包

> react ts wepack tsx分包，页面加载从40s优化到2秒，还有空间，但是不在讨论范围，本次说下wepack分包和react懒加载引子真的有4M，

╰+攻爆jí腚メ/ 2022年01月19日 23:13/ 0 赞/ 241 阅读

相关 react项目eslint和ts配置

[最佳实践antd-pro配置][antd-pro] [ @umijs/fabric][_umijs_fabric] tsconfig.json {

以你之姓@/ 2021年09月07日 06:02/ 0 赞/ 774 阅读

相关为react 项目添加 scss 和 ts

> How to Set Up a React Project Using Webpack, TypeScript, and Sass ![Image for post]

缺乏、安全感/ 2021年09月03日 08:53/ 0 赞/ 615 阅读

相关 react ts环境搭建及ts格式写法

1、脚手架启动 npx create-react-app 项目名称 --template typescript 官方建议:

系统管理员/ 2021年07月24日 15:01/ 0 赞/ 982 阅读