为什么不能从 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; } };