CODEWITHSUNDEEP
reactjsreduxreact-redux
LowCool
LowCool

Reputation: 1411

Redux reducer is not getting called in React app using react-redux hooks

I just started working on react redux with hooks, but it seems like my reducers are not passing through. I am following the official doc. Is there anything that I am missing here? I have verified that I am getting data from the backend but it is not going to the reducer here.

below is my component

import React, { useState, useEffect, useRef } from "react";
import { useDispatch } from 'react-redux';

import {getBikeInfo} from  './features/counter/getInfo/getDetails.js'

function App() {
  const dispatch = useDispatch();

  const mapContainer = useRef(null);
  useEffect(() => {
    dispatch(getBikeInfo())
  }, [])

  useEffect(() =>{

  }, [])
  return (
    <div className="district-map-wrapper">
            <div id="districtDetailMap" className="map">
                <div style={{ height: "100%" }} ref={mapContainer}>

                </div>
            </div>
        </div>
  );
}

export default App;

below is my slice (thunk + reducer file)

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

export const getDetails = createSlice({
  name: "getInfo",
  initialState: {
    value: 0
  },
  reducers: {
    bikeParkingInfo: (state, action) => {
      console.log("something");
      console.log(state);
    },
    collisionDetailInfo: (state, action) => {
      state.value -= 1;
    }
  }
});

export const { bikeParkingInfo } = getDetails.actions;
export const getBikeInfo = (dispatch) => {
  return async (dispatch, getState) => {
    try {
      // make an async call in the thunk
      const bikeParking = await axios.get(
        "http://127.0.0.1:8000/getBikeParkingDetailsFromDb"
      );
      //console.log(bikeParking)
      // dispatch an action when we get the response back
      dispatch(bikeParkingInfo(bikeParking.payload));
    } catch (err) {
      // If something went wrong, handle it here
    }
  };
};
export default getDetails.reducer;

Upvotes: 0

Views: 303

Answers (1)

LowCool
LowCool

Reputation: 1411

I got to know what I am missing, I had to register this reducer on my store.js like this

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

import getInfoReducer from '../features/counter/getInfo/getDetails'

export default configureStore({
  reducer: {
    counter: counterReducer,
    bikeInfo : getInfoReducer,
    //collisionInfo : collisionInfoReducer
  },
});

however my response data says undefined, though getting it from server

Upvotes: 1

Related Questions