简介

react-store

一. 安装

在package.json的dependencies中引入

二. 配置

2.1 在store/index.ts中引入

2.3 在顶层通过StoreProvider注入状态

三. 使用

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

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

3.3 在组件外使用, 借助getModel

简介

大家都遭受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 ({userInfo.name}--改变user中的状态)
}
​
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 {this.props.other}}
}
​
// 通过高阶组件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)

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