1

So I'm getting this error that DEC_NUM is not a function. I'm making a counter state using react-redux. When I'm clicking on counter(+), I'm getting this error.

Error Picture

Here is my code: Action/index.js

const INC_NUM = () => {
 return {
  type: "INC_NUMBER"
 };
};

const DEC_NUM = () => {
 return {
  type: "DEC_NUMBER"
 };
};

export default { INC_NUM, DEC_NUM };

Reducer/counterReducer.js

const counterReducer = (state = 1, action) => {
 if (action.type === "INC_NUMBER") {
  console.log("Pressed +");
 } else if (action.type === "DEC_NUMBER") {
  console.log("Pressed -");
 }
return state;
};
export default counterReducer;

Reducer/index.js

import counter from "./counterReducer";

import { combineReducers } from "redux";

const rootReducer = combineReducers({
 counter
});

export default rootReducer;

Store.js

import rootReducer from "./Reducer/index";
import { createStore } from "redux";

const store = createStore(rootReducer);

export default store;

The main code App.js

import "./styles.css";
import { INC_NUM, DEC_NUM } from "./Action/index";
import { useSelector, useDispatch } from "react-redux";

export default function App() {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>Reducer Counter</h1>
      <button
      onClick={() => {
        dispatch(DEC_NUM());
      }}
      >
        -
      </button>
      <span>{count}</span>
      <button
      // onClick={() => {
      //   dispatch(INC_NUM());
      // }}
      >
        +
      </button>
    </div>
  );
}

The main error is coming from this above code only that DEC_NUM is not the function

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";
import store from "./store";
import { Provider } from "react-redux";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
);
Rishabh Pagaria
  • 21
  • 1
  • 3

1 Answers1

1

You just export (not default | normal) it like ->

export const INC_NUM = () => {
 return {
  type: "INC_NUMBER"
 };
};

export const DEC_NUM = () => {
 return {
  type: "DEC_NUMBER"
 };
};

-------------

import { INC_NUM, DEC_NUM } from "./Action/index";

Note: You can't destructure default exports like this. For your case, if you want you can use:

const INC_NUM = () => {
 return {
  type: "INC_NUMBER"
 };
};

const DEC_NUM = () => {
 return {
  type: "DEC_NUMBER"
 };
};

export default { INC_NUM, DEC_NUM };

-----------------------

import counterActions from "./Action/index";

const onClick => dispatch(counterActions.INC_NUM())
Adiat Hasan
  • 372
  • 3
  • 12