react+ts

Redux Alita深度解析：从安装到实践与高级应用

最新推荐文章于 2024-10-18 08:00:00 发布

原创最新推荐文章于 2024-10-18 08:00:00 发布 · 747 阅读

2 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在React应用中使用Redux-alita进行状态管理，包括安装步骤、组件内Hook的运用，以及配合react-router-dom的路由配置。还涵盖了TS类型和关键概念如useState、useEffect的实践。

redux-alita 的使用
安装redux-alita: yarn add redux-alita 或者 npm i redux-alita

import { AlitaProvider } from 'redux-alita';
	<AlitaProvider>
		 <App />
	</AlitaProvider>

组件中使用

import { useAlita } from 'redux-alita';
function App() {
    let [count = 0, setAlita] = useAlita('count', { light: true });
    return (
        <div>
            <a onClick={() => setAlita({ stateName: 'count', data: ++count })}>+</a>
             <a onClick={() => setAlita({ stateName: 'count', data: --count })}></a>
             <div>count:{count}</div>
        </div>
    )
}

HOOK—useState、useEffect的使用
useState 类似定义一个初始值
const [collapsed, setCollapsed] = useState<boolean>(false);
useEffect会在每次渲染后调用，包括第一次渲染的时候;我们可以给useEffect传第二个参数。用第二个参数来告诉 react只有当这个参数的值发生改变时才执行我们传的副作用函数;

useEffect(() => {
    let user = umbrella.getLocalStorage('user');
    user && setAlita('auth', user);
    setAlita('responsive', { isMobile: checkIsMobile() });
    handleResize((isMobile: boolean) => setAlita('responsive', { isMobile }));
    openFNotification();
    fetchSmenu((smenus: any[]) => setAlita('smenus', smenus));
}, [setAlita]);

react-router-dom路由
react基本路由配置

import React from 'react';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import NotFound from './components/pages/NotFound';
import Login from './components/pages/Login';
import App from './App';

export default () => (
    <Router>
        <Switch>
            <Route exact path="/" render={() => <Redirect to="/app/dashboard/index" push />} />
            <Route path="/app" component={App} />
            <Route path="/404" component={NotFound} />
            <Route path="/login" component={Login} />
            <Route component={NotFound} />
        </Switch>
    </Router>
);

TS 类型
布尔类型
let status: boolean = true
数字类型
let num: number = 1
字符串
let name: string = 'u'
数组
let list: number[] = [1, 2, 3]
let list: Array<number> = [1, 2, 3]
Any (在编程阶段还不清楚类型的变量指定一个类型)
let notSure: any = 4 ; notSure = "maybe a string instead";
Void (void类型像是与any类型相反，它表示没有任何类型)
```
function getPermits(): void => {
    alert("This is Permits")
};
```
Null 和 Undefined
```
let u: undefined = undefined;
let n: null = null;
```
Never (never类型表示的是那些永不存在的值的类型)
```
function error(message: string): never {
    throw new Error(message);
}
```
类型断言 (类型断言有两种形式 as语法尖括号语法)
this[action](targetKey as string);
const [collapsed, setCollapsed] = useState<boolean>(false);

泛型
```
function getGeneric<T>(value:T):T{
	return value
} 
getGeneric<string>('getGeneric')
getGeneric<number>(1)
```