Simplify communication between React's child components
npm install @react-libraries/use-local-stateSimplify communication between React's child components
*
- mutateLocalState
- useLocalStateCreate
- useLocalSelector
- useLocalState
- useLocalState
- useLocalSelector
*
Type for State control
#### Properties
- dispatches
- value
▸ Const mutateLocalStatestate, value): void
Write a value to state
#### mutateLocalState - Type parameters
| Name | Type | Description |
| :--- | :---------------- | :--------------------------------- |
| T | T = undefined | The type of value to use for state |
#### mutateLocalState - Parameters
| Name | Type | Description |
| :------ | :----------------------------- | :-------------------------------------------- |
| state | LocalState
| value | T \| (value: T) => T | A value to set for state or a callback to set |
___
▸ Const useLocalStateCreatevalue?): LocalState
Create a state
#### useLocalStateCreate - Type parameters
| Name | Description |
| :--- | :--------------------------------- |
| T | The type of value to use for state |
#### useLocalStateCreate - Parameters
| Name | Type | Description |
| :------- | :--------------- | :------------ |
| value? | T \| () => T | Initial value |
#### useLocalStateCreate - Returns
Instances of state
___
▸ Const useLocalSelectorstate, callback): K
Select and retrieve the value of state
export
#### useLocalSelector - Type parameters
| Name | Description |
| :--- | :--------------------------------- |
| T | The type of value to use for state |
| K | Type of the selected value |
#### useLocalSelector - Parameters
| Name | Type | Description |
| :--------- | :----------------------------- | :---------------------------------- |
| state | LocalState
| callback | (value: T) => K | callbak to select the target state. |
#### useLocalSelector - Returns
K
{K} Selected state
___
▸ Const useLocalStatestate): [T, (value: T \| (value: T) => T) => void]
Perform the same action as useState
export
#### useLocalState - Type parameters
| Name | Type | Description |
| :--- | :---------------- | :--------------------------------- |
| T | T = undefined | The type of value to use for state |
#### useLocalState - Parameters
| Name | Type | Description |
| :------ | :----------------------------- | :--------------------------------- |
| state | LocalState
#### useLocalState - Returns
[T, (value: T \| (value: T) => T) => void]
___
▸ Const useLocallReducerstate,reducer): ((action: K) => void)
Reducer to manipulate the state.
#### useLocallReducer - Type parameters
| Name | Type | Description |
| :--- | :--- | :--------------------------------- |
| T | T | The type of value to use for state |
| K | K | Action function |
#### useLocallReducer - Parameters
| Name | Type | Description |
| :-------- | :----------------------------- | :--------------------------------- |
| state | LocalState
| reducer | (state: T, action: K) =>
#### useLocallReducer - Returns
(action: K) => void
___
``tsx
import React from 'react';
import {
useLocalStateCreate,
LocalState,
useLocalState,
mutateLocalState,
} from '@react-libraries/use-local-state';
const Component1 = ({ localState }: { localState: LocalState
const [value, setValue] = useLocalState(localState);
console.log('Component1(send)');
return (
Component1
{value}
);
};
const Component2 = ({ localState }: { localState: LocalState
const [value, setValue] = useLocalState(localState);
console.log('Component2(send)');
return (
Component2
{value}
);
};
const Component3 = ({ localState }: { localState: LocalState
console.log('Component3(recv)');
return (
Component3
);
};
const App = () => {
const localState = useLocalStateCreate(0);
console.log('Parent');
return (
<>
Parent
);
};
export default App;
`
!localhost_3000_index11 - Google Chrome 2021-06-11 15-09-30
`tsx
import React, { VFC } from 'react';
import {
useLocalStateCreate,
LocalState,
useLocalState,
mutateLocalState,
useLocalSelector,
} from '@react-libraries/use-local-state';
interface LocalStateType {
tall: number;
weight: number;
}
interface ChildProps {
localState: LocalState
}
export const Tall: VFC
console.log('Tall');
const tall = useLocalSelector(localState, (v) => v.tall);
return (
Tall:
onChange={(e) => {
mutateLocalState(localState, (v) => ({ ...v, tall: Number(e.target.value) }));
}}
/>
);
};
export const Weight: VFC
console.log('Weight');
const weight = useLocalSelector(localState, (v) => v.weight);
return (
Weight:
onChange={(e) => {
mutateLocalState(localState, (v) => ({ ...v, weight: Number(e.target.value) }));
}}
/>
);
};
export const Bmi: VFC
console.log('Bmi');
const [{ tall, weight }] = useLocalState(localState);
return (
{isNaN(Number(tall)) || isNaN(Number(weight))
? 'Error'
: BMI:${Math.floor((Number(weight) / Math.pow(Number(tall) / 100, 2)) * 100) / 100}}
);
};
const App = () => {
const localState = useLocalStateCreate
console.log('Parent');
return (
<>
);
};
export default App;
`
!localhost_3000_index11 - Google Chrome 2021-06-11 15-09-30_1
`tsx
import React, { VFC } from 'react';
import {
LocalState,
useLocalSelector,
useLocalStateCreate,
useLocallReducer,
} from '@react-libraries/use-local-state';
interface LocalStateType {
tall: number;
weight: number;
}
interface ChildProps {
state: LocalState
}
const reducer = (
state: LocalStateType,
{ type, payload: { value } }: { type: 'SET_TALL' | 'SET_WEIGHT'; payload: { value: number } }
) => {
switch (type) {
case 'SET_TALL':
return { ...state, tall: value };
case 'SET_WEIGHT':
return { ...state, weight: value };
}
};
export const Tall: VFC
console.log('Tall');
const tall = useLocalSelector(state, (v) => v.tall);
const dispatch = useLocallReducer(state, reducer);
return (
Tall:
onChange={(e) => {
dispatch({ type: 'SET_TALL', payload: { value: Number(e.target.value) } });
}}
/>
);
};
export const Weight: VFC
console.log('Weight');
const weight = useLocalSelector(state, (v) => v.weight);
const dispatch = useLocallReducer(state, reducer);
return (
Weight:
onChange={(e) => {
dispatch({ type: 'SET_WEIGHT', payload: { value: Number(e.target.value) } });
}}
/>
);
};
export const Bmi: VFC
console.log('Bmi');
const { tall, weight } = useLocalSelector(state, (v) => v);
return (
{isNaN(Number(tall)) || isNaN(Number(weight))
? 'Error'
: BMI:${Math.floor((Number(weight) / Math.pow(Number(tall) / 100, 2)) * 100) / 100}}
);
};
const App = () => {
const state = useLocalStateCreate
console.log('Parent');
return (
<>
);
};
export default App;
``