react-global-shared

react-global-shared

react全局状态管理,更自由,更简单.

✨ Features

• 全局状态管理,兼容hooks
• 可以再非组件中操作状全局状态

简介

修改objectState中state,调用的地方会重新render hooks: useGlobalState 普通组件: connect

// 直接返回state
useGlobalState(objeact: objectState): state

//  注入state到Component
connect(Component: React.ComponentType, ...objectState):React.ComponentType

objectState

• name 必填值 用于注入普通组件中
• state 必填值 用于初始化值
• [key as string]: () => 在方法中直接修改state值即可

Installing

yarn add react-global-shared

Running the tests

yarn run test

Usage

olny tow api

import { connect, useGlobalState } from 'react-global-shared

Quick Start

state

// userState.js
export const userState = {
    name: "user",
    state: { email: "init@exapmle.com" },
    changeEmail: function(){
        this.state = { email: "hh@exapmle.com"}
    }
}

commonly exapmle

// App.js
import React from 'react'
import { connect } from 'react-global-shared
import { userState } from './userState'
class App extends React.Component{
    render(){
        const user = this.props.user
        return <div>
                    <span>{user.email}</span>
                    <button onClick={userState.changeEmail}> change email</button>
                </div>
    }
}
export default connect(App, userState)

hooks exapmle

// App.js
import React from 'react'
import { useGlobalState } from 'react-global-shared'
import { userState } from './userState'

export default () => {
    const user = useGlobalState(userState)
    return <div>
                <span>{user.email}</span>
                <button onClick={userState.changeEmail}> change email</button>
            </div>
}

// 任意function 可直接调用

// util.js
import { userState } from './userState'
const change = (email) => {
    userState.changeEmail(email)
    return email
}

FAQ

• 修改了state,没有render？

Built With

• immutability-helper - Mutate a copy of data without changing the original source

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• girl friend give strong backing