o0y0o / Use Reducer X
Licence: mit
🔩 An alternative to useReducer that accepts middlewares.
Stars: ✭ 62
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Use Reducer X
Noop Stream
Create a readable Node.js stream that produces no data (or optionally blank data) or a writable stream that discards data
Stars: ✭ 40 (-35.48%)
Mutual labels: npm-package
Awesome Node Utils
some useful npm packages for nodejs itself
Stars: ✭ 51 (-17.74%)
Mutual labels: npm-package
Node Native Ext Loader
Loader for Node native extensions
Stars: ✭ 51 (-17.74%)
Mutual labels: npm-package
Byte Size
Isomorphic function to convert a bytes value (e.g. 3456) to a human-readable string ('3.5 kB')
Stars: ✭ 33 (-46.77%)
Mutual labels: npm-package
Packagephobia
⚖️ Find the cost of adding a new dependency to your project
Stars: ✭ 1,110 (+1690.32%)
Mutual labels: npm-package
Nodereactionagent
NodeReactionAgent is an Node.js asynchronous performance monitoring tool to be in conjunction with Nodereaction.com or nodereactionclient
Stars: ✭ 49 (-20.97%)
Mutual labels: npm-package
React Use Api
Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
Stars: ✭ 49 (-20.97%)
Mutual labels: npm-package
Reapex
A lightweight framework to build pluggable and extendable redux/react application
Stars: ✭ 58 (-6.45%)
Mutual labels: reducer
Actions Package Update
keeps npm dependencies up-to-date by making pull requests from GitHub Actions or CI.
Stars: ✭ 36 (-41.94%)
Mutual labels: npm-package
Node Env Webpack Plugin
Simplified `NODE_ENV` handling with webpack
Stars: ✭ 51 (-17.74%)
Mutual labels: npm-package
Mongoose Update If Current
Optimistic concurrency (OCC) plugin for mongoose.
Stars: ✭ 61 (-1.61%)
Mutual labels: npm-package
Cli Mandelbrot
📦 View the Mandelbrot set from your terminal
Stars: ✭ 59 (-4.84%)
Mutual labels: npm-package
@0y0/use-reducer-x ·
@0y0/use-reducer-x
is an alternative to React.useReducer
that accepts middlewares to do some cool things before and after dispatch.
Inspired by Redux Middleware.
3-second quick look
import useReducerX from '@0y0/use-reducer-x'
function App() {
const middlewares = [
({ getState, dispatch }) => next => action => {
// do something before dispatch...
next(action)
// do something after dispatch...
}
]
const [state, dispatch] = useReducerX(reducer, initialState, middlewares)
// ...
}
Installation
npm install @0y0/use-reducer-x --save
Real-world Usage
import React from 'react'
import useReducerX from '@0y0/use-reducer-x'
import thunkMiddleware from 'redux-thunk'
function logMiddleware({ getState }) {
return next => action => {
console.log('Prev State:', getState())
console.log('Action:', action)
next(action)
console.log('Next State:', getState())
}
}
function gaMiddleware({ getState }) {
return next => action => {
window.ga && window.ga('send', 'event', 'Action', action.type)
next(action)
}
}
function useAppReducer(reducer, inititalState) {
return useReducerX(reducer, inititalState, [
thunkMiddleware,
logMiddleware,
gaMiddleware
])
}
function counterReducer(state, action) {
switch (action.type) {
case '+1': return { count: state.count + 1 }
case '-1': return { count: state.count - 1 }
case '0': return { count: 0 }
default: return state
}
}
function resetCounterAfter1Second() {
return dispatch => setTimeout(() => { dispatch({ type: '0' }) }, 1000)
}
function App() {
const [state, dispatch] = useAppReducer(counterReducer, 0)
return (
<React.Fragment>
<button onClick={() => dispatch({ type: '+1' })}>+</button>
<button onClick={() => dispatch(resetCounterAfter1Second())}>Reset</button>
<button onClick={() => dispatch({ type: '-1' })}>-</button>
<br />
Count: {state.count}
</React.Fragment>
)
}
Try the demo in codesanbox.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].