Search code examples
reactjsreduxstructureaction

React redux - actions

Recently I'm trying my best in redux, and I have seen a really good folder structure project, I tried to get the same structure, but the same way didn't work...

E.g. I've got a path something like that: ./src/_actions and inside this folder I've got "user.actions.js", "alert.actions.js", "index.js".

In alert.actions.js I've got something like that:

import { alertConstants } from "../_constants/alert.constants";

export const alertActions = {
  success,
  error,
  clear,
};

function success(message) {
  return { type: alertConstants.SUCCESS, message };
}

function error(message) {
  return { type: alertConstants.ERROR, message };
}

function clear() {
  return { type: alertConstants.CLEAR };
}

And I'd love to import all of them from one place like to the folder where path is "./../test.js":

import {alertActions} from "./../_actions";
import {useDispatch} from "react-redux";

export const test = () => {
const dispatch = useDispatch();

return (
<button onClick={() => dispatch(alertActions.success("test"))}> Click </button>
)

}

but I got something like "alertActions.success" is undefined. I don't know what I'm doing wrong.. In that project, index.js has been empty as well... that object supposed to export those all functions.. somebody know any solution? :(

Solution

  • You need to export the object after the functions are made. Usually they are hoisted, but in this case you are probably using strict mode and they are not. You have to either move the export object or better yet export all of them individually and then when you are importing them you should write:

    import * as alertActions from 'youfile'

    And if you want to export a whole object you should export it like:

    export default alertActions

    And then you need to import them like:

    import alertActions from 'yourfile'

    and access them:

    alrtActions.error()