A hook to listen to Redux actions in your component.

ActionReducer.js

const initialState = {
  type: null,
  payload: null,
  meta: null,
  error: false
};

export default (state = initialState, action) => {
  return {
    ...state,
    ...action
  };
};

example.js

useReduxAction({ payload, error } => {
    // Do something here
}, MY_REDUX_ACTION, []);

store.js

const reducers = combineReducers({
  ...
  action: ActionReducer
});

useReduxAction.js

/*
* It's important to also use a action reducer
* which keeps track of the latest action for
* this to work.
*/

import { useRef, useEffect } from "react";
import { useStore } from "react-redux";
import _castArray from "lodash.castarray";

/**
 * Subscribes to redux store events
 *
 * @param effect
 * @param type
 * @param deps
 */
export function useReduxAction(effect, type, deps = []) {
  const currentValue = useRef(null);
  const store = useStore();

  const handleChange = () => {
    const state = store.getState();
    const action = state.action;
    let previousValue = currentValue.current;
    currentValue.current = action.type;

    if (
      previousValue !== action.type &&
      _castArray(type).includes(action.type)
    ) {
      effect(action);
    }
  };

  useEffect(() => {
    const unsubscribe = store.subscribe(handleChange);
    return () => unsubscribe();
  }, deps);
}

@closetothe this is an outdated implementation, the problem with this is that if you fire two actions of the same type in sequence, the second action does NOT run an effect. Check out our latest implementation which solves this problem: https://github.com/aspect-apps/use-redux-effect/blob/master/src/use-redux-effect.

I hate pulling lodash just for a single function but it's not too difficult to modify. Thanks for the link @lukebrandonfarrell

@FullStackForger, maybe you could make a PR? (I agree)

This is a piece of gold, thanks

@PilotLeon checkout the package: https://github.com/aspect-apps/use-redux-effect