unstate-next 的使用

Posted on In , , Views: Changyan: Word count in article: 128 Reading time ≈ 1 mins.
unstated-next 的使用可以简化react state manager，可以替换React 原有的useContext 方法, 亦可以管理全局状态信息。

Install

Code-Test

1
2
3
npm install --save unstated-next

yarn add unstated-next

createContainer

1
2
3
4
5
6
7
8
9
10
11
12
13
import { useState } from "react";
import { createContainer } from "unstated-next"

const useCounter = (props: any) => {
    const { initNum } = props;
    const [num, changeNum] = useState<number>(initNum);
    let decrement = () => changeNum(num - 1)
    let increment = () => changeNum(num + 1)
    return {num, decrement, increment};
}

export const Counter = createContainer(useCounter);

use Provider && initialState

1
2
3
4
5
6
7
8
9
10
11
import './App.css'
import { Counter } from './Context'
import {TestCounter} from './TestCounter'

export default function App() {
return (
    <Counter.Provider initialState={{ initNum: 1 }}>
    <TestCounter />
    </Counter.Provider>
)
}

useContainer

TestCounter
1
2
3
4
5
6
7
8
9
10
11
import { Counter } from "./Context"
import {TestChild} from './TestChild'

export const TestCounter = () => {
    const { num, decrement } = Counter.useContainer();
    
    return <>
        <button onClick={decrement}>减法</button>
        <TestChild />
    </>
}
TestChild
1
2
3
4
5
6
7
8
9
import { Counter } from "./Context"

export const TestChild = () => {
    const { num, increment } = Counter.useContainer();
    return <>
        {num} <button onClick={increment}>加法</button>
    </>
}