Why can’t react read my properties property from redux?

Question

Why can’t react read my properties property from redux

I made a ReactJS and redux application to real and to handle redux actions but when I run the code react says that the properties aren’t defined. I tried tweaking both the initState and index.js file. If you want the full file this is the link https://codesandbox.io/s/landing-page-forked-rkq6f?file=/src/reducers/initState.js and type this in the mini browser rkq6f.csb.app/search/1

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { ThemeProvider } from "styled-components";
import { theme } from "./Components/UI";
import App from "./App";
import { Provider } from "react-redux";
import { StoreReducer } from "./reducers/reducer";
// reducers
import thunk from "redux-thunk"
import logger from "redux-logger"
import { createStore,applyMiddleware } from "redux"

const store = createStore(StoreReducer,applyMiddleware(thunk,logger))
console.log(store)

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
        <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

initState.js

const initState = {
  properties: [],
  loading: false,
  error: false
};
export default initState;

reducer.js

import initState from "./initState";

export const StoreReducer = (state = initState, action) => {
...
   }
};

Answer 1

The Problem is that you reducer is not returning default state ,

import initState from "./initState";

export const StoreReducer = (state = initState, action) => {
  switch (action.type) {
    case "LOADING_PROPERTIES":
      // Update total price of cart items
      // Subtract item base price + item quantity
      return {
        ...state,
        loading: true
      };
    case "FETCH_PROPERTIES":
      // Update total price of cart items
      // Subtract item base price + item quantity
      return {
        ...state,
        properties: action.payload,
        loading: false
      };
    case "FETCH_PROPERTIES_ERROR":
      // Update total price of cart items
      // Subtract item base price + item quantity
      return {
        ...state,
        loading: false,
        error: true
      };
      /* this ONe */
    default:
     null;
  }
};

you are not returning anything .

instead the reducer by default need to return the initial State

here is Working reducer :

import initState from "./initState";

export const StoreReducer = (state = initState, action) => {
  switch (action.type) {
    case "LOADING_PROPERTIES":
      // Update total price of cart items
      // Subtract item base price + item quantity
      return {
        ...state,
        loading: true
      };
    case "FETCH_PROPERTIES":
      // Update total price of cart items
      // Subtract item base price + item quantity
      return {
        ...state,
        properties: action.payload,
        loading: false
      };
    case "FETCH_PROPERTIES_ERROR":
      // Update total price of cart items
      // Subtract item base price + item quantity
      return {
        ...state,
        loading: false,
        error: true
      };
    default:
     return initState;
  }
};