Reactjs using redux ("function name") is not a function

Question

I am receiving the error vesselList is not a function in my homescreen that's using a redux slice the error is in vesselList() in the dispatch in the useEffect hook please suggest if there is a better way i can reform this code.

the Slice : vesselSlice :

export const vesselSlice = createSlice({
  name: "vesselList",
  initialState: {
    vessels: [],
  },
  reducers: {
    vesselList: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const {
  vesselList,
} =
  (keyword = "") =>
  async (dispatch) => {
    try {
      dispatch({ type: VESSEL_LIST_REQUEST });
      const { data } = await axios.get(
        "http://127.0.0.1:8000/api/vessels/info"
      );

      dispatch({
        type: VESSEL_LIST_SUCCESS,
        payload: data,
      });
    } catch (error) {
      dispatch({
        type: VESSEL_LIST_FAIL,
        payload:
          error.response && error.response.data.detail
            ? error.response.data.detail
            : error.message,
      });
    }
  };
export default vesselSlice.reducer;

HomeScreen.js :

function HomeScreen() {
  const dispatch = useDispatch();
  const Listvessel = useSelector((state) => state.vesselList);
  const { error, loading, vessels } = Listvessel;
  useEffect(() => {
    dispatch(vesselList());
  }, [dispatch]);
  return (
    <div>
      Fleet vessels :
      <div className="fleet-vessels-info">
        {vessels.map((vessel) => (
          <VesselCard vessel={vessel} />
        ))}
      </div>
    </div>
  );
}

export default HomeScreen;

VMT · Accepted Answer · 2022-05-19 11:41:07Z

1

Because vesselList not yet export, why you not use createAsyncThunk to fecth url and dispatch to redux store?

answered May 19, 2022 at 11:41

VMT

8091 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

newprogrammer12 Over a year ago

but i have export const { vesselList, } in my slice is that not the same ?

VMT Over a year ago

In docs, export action like: export const { vesselList, } = vesselSlice.action

Collectives™ on Stack Overflow

Reactjs using redux ("function name") is not a function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related