)
}
```
#### Reference
```js
const [state, methods, getState] = useMethods(
createMethods,
initialState,
useMethodsOptions
)
```
- `createMethods` : function that takes current state or An object containing methods, actions and effects, return an object containing methods that return updated state.
- `initialState` : initial value of the state.
- `useMethodsOptions`: an object that customizes the internal behavior of useMethods for users.
```ts
import { useReducer, Reducer } from 'react'
interface UseMethodsOptions<
S,
A extends AnyAction,
L extends boolean = false
> {
reducerMapper?: (reducer: Reducer) => Reducer
customUseReducer?: typeof useReducer
enableLoading?: L
}
```
- reducerMapper: an interface for user to change the native reducer of useMethods (like immer).
- customUseReducer: a custom hook like `React.useReducer`, and given the second parameter to get the state asynchronously, you can create it by `createUseReducer`( not recommended to use it directly, it should be generated in createUseMethods ).
- enableLoading: inject the `actionLoading` property into the state，to get the loading state of the action.
### createUseReducer
A factory to create the useReducer hook, same as [react-use/createReducer](https://github.com/streamich/react-use/blob/master/docs/createReducer.md)
### createUseMethods
A factory to create the useMethods hook and you can add middlewares (like redux-thunk) to extend it.
#### Usage
```js
import thunk from 'redux-thunk'
import { createUseMethods } from 'react-use-methods'
// make sure immer has been installed
import { combineReducers } from 'react-use-methods/reducer-mapper/es/immer'
// note: npm install immer
const useMethods = createUseMethods(
{
// use immer
reducerMapper: combineReducers,
},
thunk
)
function App() {
const [{ count }, methods] = useMethods(
(state) => {
return {
methods: {
increment() {
state.count += 1
return state
},
decrement() {
return { ...state, count: state.count - 1 }
},
reset() {
state.count = 0
return state
},
},
actions: {
addAndReset() {
return ({ dispatch }) => {
const addAndReset = () => {
return (thunkDispatch) => {
thunkDispatch({ type: 'increment' })
setTimeout(() => {
thunkDispatch({ type: 'reset' })
}, 1000)
}
}
dispatch(addAndReset())
}
},
},
}
},
{
count: 0,
}
)
return (
{count}
)
}
```
#### Reference
```js
const useMethods = createUseMethods(useMethodsOptions, ...middlewares)
// or
const useMethods = createUseMethods(...middlewares)
```
- `useMethodsOptions`: same as useMethods.
- `middlewares`: custom middlewares for dispatch actions, like redux-thunk.
### createUseMethodsContext
A state management factory function that allows all components in the provider to easily share state.
#### Usage
```js
// provider.js
import { createMethodsContext, createUseMethods } from 'react-use-methods'
// make sure immer has been installed
import { combineReducers } from 'react-use-methods/reducer-mapper/es/immer'
const useMethods = createUseMethods({
reducerMapper: combineReducers,
})
const {
// set name to change automatically
useCountContext,
CountProvider,
withCountProvider,
connectCountContext,
} = createMethodsContext(
(state) => {
return {
// if we don't need actions，we can move the methods to the fist level
increment() {
state.count += 1
return state
},
incrementDouble() {
return { ...state, count: state.count * 2 }
},
decrement() {
state.count -= 1
return state
},
set(current) {
return { ...state, count: current }
},
reset() {
return { ...state, count: 0 }
},
}
},
{
count: 0,
},
{
useMethodsOptions: {
reducerMapper: combineReducers,
enableLoading: true,
},
// set the name can help you automatically modify the return value of createMethodsContext
name: 'count',
customUseMethods: useMethods,
}
)
export {
useCountContext,
CountProvider,
withCountProvider,
connectCountContext,
}
```
```jsx
// index.jsx
import React from 'react'
import { useCountContext, CountProvider } from './provider'
function Counter() {
const [state, methods] = useCountContext()
return (
{state.count}
)
}
function App() {
return (
// you can give a new initialValue for different provider
)
}
export default App
```
**or**
```jsx
// index.jsx
import React from 'react'
import { useCountContext, withCountProvider } from './provider'
function Counter() {
const [state, methods] = useCountContext()
return (
{state.count}
)
}
export default withCountProvider(Counter, {
// provider props
initialValue: {
count: 10,
},
})
```
You can also use `connect` api, like `react-redux`。
```jsx
import React from 'react'
import { useCountContext, connectCountContext } from './provider'
function Counter(props) {
// inject state and methods by default
const { state, methods } = props
return (
{state.count}
)
}
export default connectCountContext(Counter)()
```
For Typescript，you can:
```tsx
import React from 'react'
import {
connectCountContext,
useCountContext,
withCountProvider,
} from './provider'
type CountState = ReturnType[0]
type CountMethods = ReturnType[1]
// Don't worry about external Typescript error, the connect function will clear its effects
interface CounterProps {
state: CountState
methods: CountMethods
}
function Counter(props: CounterProps) {
// inject state and methods by default
const { state, methods } = props
return (
{state.count}
)
}
export default connectCountContext(Counter)()
```
Accept a mapper function:
```tsx
import React from 'react'
import { connectCountContext, useCountContext, withCountProvider } from './provider'
type CountState = ReturnType[0]
type CountMethods = ReturnType[1]
// Don't worry about external Typescript error, the connect function will clear its effects
interface CounterProps{
count: CountState['count']
methods: CountMethods
}
function Counter(props: CounterProps) {
// inject state and methods by default
const { count, methods } = props
return (
{count}
)
}
export default connectCountContext(Counter)(({ count } , methods) => ({
count,
methods
})
```
#### Reference
```js
const {
useMethodsContext,
MethodsProvider,
withMethodsProvider,
connect,
MethodsContext,
} = createUseMethodsContext(
createMethods,
defaultInitialValue,
createMethodsContextOptions
)
```
- `createMethodsContextOptions`:
```ts
interface CreateMethodsContextOptions<
S extends Record,
UM extends CreateUseMethodsReturn,
L extends boolean
> {
useMethodsOptions?: UseMethodsOptions
customUseMethods?: UM
// methods context name, default: methods
name?: string
}
```
---
_Source: https://npm.io/package/react-use-methods · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._