简介

大家都遭受rudex的毒打吧，基础掌握不好，会出现很多问题，然而React封装的React-Redux也没有好哪去呀！

我们公司使用的这个是自己上传的npm包，基于react-context的react原子化状态管理器，具有完整的ts类型推测。

react-store

基于react-context的react原子化状态管理器，具有完整的ts类型推测。使用方法及其简单！

一. 安装

在package.json的dependencies中引入

  {"react-store": "https://h5-fc-code.oss-cn-hangzhou.aliyuncs.com/package/react-store/react-store-1.1.0.tgz"}

然后执行安装依赖操作

  npm i react-store -S

二. 配置

2.1 在store/index.ts中引入

import { useState } from 'react'

/** 1. 引入react-store */
import createStore from 'react-store'

/** 2. 定义各个原子化状态 */
// user
const userModel = () => {const [ userInfo, setUserInfo ] = useState<{ name: string }>({ name: 'name' })return { userInfo, setUserInfo }
}

// other
const otherModel = () => {const [ other, setOther ] = useState(20)return { other, setOther }
}

/** 3. 组合所有状态 */
const store = createStore(() => ({user: userModel(),other: otherModel(),
}))

/** 向外暴露useModel, StoreProvider, getModel, connectModel */
export const { useModel, StoreProvider, getModel, connectModel } = store

2.3 在顶层通过StoreProvider注入状态

// src/main.ts
import React from 'react'
import ReactDOM from 'react-dom'
import App from '@/App'
// 1. 引入StoreProvider
import { StoreProvider } from '@/store'

// 2. 使用StoreProvider包裹App组件
ReactDOM.render(,document.getElementById('root')
)

三. 使用

3.1 在函数组件中使用，借助useModel

import React from 'react'
import { useModel } from '@/store'

function FunctionDemo() {
/** 通过useModel取出user状态 */const { userInfo, setUserInfo } = useModel('user')
/** 在点击事件中调用setUserInfo改变状态 */const onChangeUser = () => {setUserInfo({name: userInfo.name + '1',})}
// 展示userInfo.namereturn ()
}

export default FunctionDemo

3.2 在class组件中使用,借助connectModel

import React, { Component } from 'react'
import { connectModel } from '@/store'

// 定义class组件props
interface IClassDemoProps {setOther: React.Dispatch>other: numbernum: number
}

class ClassDemo extends Component {
// 通过this.props获取到方法修改状态onChange = () => {this.props.setOther(this.props.other + 1)}
render() {console.log(this.props.num)// 通过this.props获取到状态进行展示return }
}

// 通过高阶组件connectModel把other状态中的属性和方法注入到类组件中
export default connectModel('other',state => ({other: state.other,setOther: state.setOther
}))(ClassDemo)

3.3 在组件外使用, 借助getModel

import { getModel } from '@/store'

export const onChangeUser = () => {// 通过getModel读取user状态，进行操作const user = getModel('user')user.setUserInfo({name: user.userInfo.name + '1'})
}

// 1秒后执行onChangeUser方法
setTimeout(onChangeUser, 1000)

大家可以测试下真的很好用，一个子爽！

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：太强了！赖斯本场数据：1射2传，预期进球0.03个，获评9.4分赖斯三分球大赛赖斯有多猛

下一篇：巴萨遭扳平！佩利斯特里助攻，格拉纳达抢点破门巴萨被莱万特逆转巴萨1:0小胜格拉纳达