react-reducer-thunk
v1.0.1
Published
react hooks useReducer for asynchronous processing
Downloads
7
Maintainers
Readme
react-reducer-thunk
- Base on react(16.8.*) with react-hooks
Why use this?
At present.useReducer can not process asynchronous request.We can only do synchronous things. So we can use useContext and some skills to process the question. Below
Installation
npm install --save react-reducer-thunk
Usage
Example with defaults Creating an example reducer
import { getProvider, Context } from 'react-reducer-thunk'
const initialState = {
isOnline: false,
timeDuration: '00:00:00',
}
const reducer = (state, { type, payload }) => {
switch (type) {
case 'getLoginStatus':
return { ...state, isOnline: payload === 1 }
case 'changeTime':
return { ...state, timeDuration: payload.time }
default:
return state
}
}
const Provider = getProvider(reducer, initialState)
export {
Context,
Provider
}
Creating an example component
// business component
import React, { useState, useEffect, useContext } from 'react'
import { Provider, Context } from './reducer.js'
const getStatus = async () => {
const data = await asyncFunc()
return data
}
function asyncFunc() {
return new Promise(resolve => {
setTimeout(() => {
resolve(1)
}, 2000)
})
}
const User = props => {
const { state, dispatch } = useContext(Context)
useEffect(() => {
dispatch({
type: 'getLoginStatus',
payload: getStatus()
})
}, [])
const changeTime = () => {
dispatch({
type: 'changeTime',
payload: { time: '11:11:11' }
})
}
return (
<div className="im-bar cursor-pointer inline-block">
<div>{state.isOnline ? '已登录': '未登录'}</div>
<span className="time" onClick={changeTime}>{state.timeDuration}</span>
</div>
)
}ß
export default props => {
return (
<Provider>
<User {...props} />
</Provider>
)
}
Instructions
- params: your own reducer and initialState
- export Context and Provider
- use Provider to wrapped your component
useContext(Context)
for get state and dispatch- dispatch({ type, payload }) - payload: async func or data
License
ISC