You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-usemiddleware

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-usemiddleware - npm Package Compare versions

Comparing version

1.0.1
to
1.0.2

2

es/index.js
import { useReducer } from 'react';
import { applyMiddleware } from 'redux';
const useMiddleware = (middlewares, reducer, initState) => {
const useMiddleware = (reducer, initState, middlewares = []) => {
const [state, dispatch] = useReducer(reducer, initState);

@@ -6,0 +6,0 @@ const getStore = () => ({ dispatch, getState: () => state });

2

lib/index.js
import { useReducer } from 'react';
import { applyMiddleware } from 'redux';
const useMiddleware = (middlewares, reducer, initState) => {
const useMiddleware = (reducer, initState, middlewares = []) => {
const [state, dispatch] = useReducer(reducer, initState);

@@ -6,0 +6,0 @@ const getStore = () => ({ dispatch, getState: () => state });

8

package.json
{
"name": "react-usemiddleware",
"version": "1.0.1",
"description": "React >=16.7 hook, allowing to use standard Redux middleware",
"version": "1.0.2",
"description": "React >=16.7 hook, allowing to use standard Redux middleware with useReducer",
"scripts": {

@@ -45,4 +45,4 @@ "clean": "rimraf lib dist es",

"rifraf": "^2.0.3",
"webpack": "^4.26.1"
"rimraf": "^2.6.2"
}
}
}

55

README.MD
# React `useMiddleware` hook
[![npm version](https://img.shields.io/npm/v/react-usemiddleware.svg?style=flat-square)](https://www.npmjs.com/package/react-usemiddleware)
Redux compatible [middleware](https://redux.js.org/advanced/middleware) provider for React >=16.7 [Hooks](https://reactjs.org/docs/hooks-intro.html)
**React-useMiddleware** allows you to use Redux existing middleware with React's new feature called hooks.
It introduces new hook called `useMiddleware`
**react-useMiddleware** allows you to use [all existing Redux middlewares](https://github.com/xgrommx/awesome-redux#react---a-javascript-library-for-building-user-interfaces) with React's new feature called hooks.
It introduces new hook called `useMiddleware`, which is a wrapper arounf `useReducer`, but allows you to pass a list of middlewares to be used.

@@ -11,3 +14,3 @@ ## Install

$ npm install react-usemiddleware --save
$ yarn add react-middleware
$ yarn add react-usemiddleware
```

@@ -17,4 +20,6 @@

you can use `useMiddleware` as a straight replacement for `useReducer`, and optionally pass 3rd parameter - an array of middlewares to be applied to a dispatch function.
```
const [state, dispatch] = useMiddleware(middlewares, reducer, initialState);
const [state, dispatch] = useMiddleware(reducer, initialState, middlewares = []);

@@ -24,5 +29,5 @@ ```

Takes 3 parameters:
- middlewares - array of middlewares, eg, `[thunk, createLoggers, ...]`
- reducer, same as passed into `useReducer` hook
- initialState, same as passed into `useReducer` hook
- `reducer`, same as passed into `useReducer` hook
- `initialState`, same as passed into `useReducer` hook
- `middlewares` - array of middlewares, eg, `[thunk, createLogger, saga]`

@@ -32,9 +37,6 @@ ## Example

```
import React from "react";
import ReactDOM from "react-dom";
import { useReducer, useEffect, useState } from "react";
import { applyMiddleware } from "redux";
import React from 'react';
import useMiddleware from 'react-usemiddleware';
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";
import { createLogger } from "redux-logger";
import { useMiddleware } from "react-usemiddleware";

@@ -57,31 +59,18 @@ const logger = createLogger();

function App() {
const [state, dispatch] = useMiddleware(middlewares, reducer, 0);
const [fetched, setFetched] = useState(false);
const loadInit = () =>
setTimeout(() => dispatch({ type: "SET", payload: 15 }), 1000);
const App = (props) => {
const [count, dispatch] = useMiddleware(reducer, 0, middlewares);
const thunkAction = dispatch(() => setTimeout(() => dispatch({ type: "SET", payload: 7 })), 1000);
const incCount = () => dispatch({ type: "INC" });
const decCount = () => dispatch({ type: "DEC" });
const setCount = payload => dispatch({ type: "SET", payload });
useEffect(
() => {
if (!fetched) {
dispatch(loadInit());
setFetched(true);
}
},
[fetched]
);
return (
<div className="App">
<button onClick={decCount}>[-]</button>
<span>{state}</span>
<span>{count}</span>
<button onClick={incCount}>[+]</button>
<button onClick={thunkAction}>Async</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

@@ -88,0 +77,0 @@

2

src/index.js
import { useReducer } from 'react';
import { applyMiddleware } from 'redux';
const useMiddleware = (middlewares, reducer, initState) => {
const useMiddleware = (reducer, initState, middlewares = []) => {
const [state, dispatch] = useReducer(reducer, initState);

@@ -6,0 +6,0 @@ const getStore = () => ({ dispatch, getState: () => state });