A Redux Slice returns undefined




Vreau sa creez un slice pentru functia de search. O sa am Blog>Navbar>search
Dar cand folosesc functia de search,data din componenta Blog vreau sa se filtreze.
In consola primesc TypeError: Cannot read properties of undefined (reading ‘searchTerm’)
aici ar fi eroarea — export const selectSearchTerm = (state) => state.search.searchTerm;
Acum invat Redux…

import { combineReducers } from "redux";
import { trainersApi } from "../apiSlice";
import starsSlice from "../starsSlice";
import searchSlice from "./searchSlice";

const rootReducer = combineReducers({
  stars: starsSlice,
  trainersApi: trainersApi,
  search: searchSlice,
});

export default rootReducer;
import { createSlice } from "@reduxjs/toolkit";

const searchSlice = createSlice({
  name: "search",
  initialState: {
    searchTerm: "",
  },
  reducers: {
    updateSearchTerm: (state, action) => {
      state.searchTerm = action.payload;
    },
  },
});
console.log(searchSlice);
export const { updateSearchTerm } = searchSlice.actions;
export const selectSearchTerm = (state) => state.search.searchTerm;

export default searchSlice.reducer;
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./reducers";

export const store = configureStore({
  reducer: rootReducer,
});
 const dispatch = useDispatch();
  const searchTerm = useSelector(selectSearchTerm);

  const handleInputChange = (e) => {
    const newSearchTerm = e.target.value;
    dispatch(updateSearchTerm(newSearchTerm));
  };

<input
              type="text"
              value={searchTerm}
              onChange={handleInputChange}
              className="p-1 fontAwesome text-black w-11/12 outline-none"
              placeholder="&#xf002; Search..."
            />
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const trainersApi = createApi({
  reducerPath: "trainersApi",
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:8000/" }),
  endpoints: (builder) => ({
    getAllTrainers: builder.query({
      query: () => "trainers",
    }),
    getAllTestimonials: builder.query({
      query: () => "testimonials",
    }),
    getAllPosts: builder.query({
      query: () => "posts",
    }),
  }),
});

export const {
  useGetAllTrainersQuery,
  useGetAllTestimonialsQuery,
  useGetAllPostsQuery,
} = trainersApi;
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./app.css";
import { store } from "./store.js";
import { Provider } from "react-redux";
import { ApiProvider } from "@reduxjs/toolkit/query/react";
import { BrowserRouter } from "react-router-dom";
import "./App.css";
import { trainersApi } from "../features/apiSlice.jsx";
import ErrorBoundary from "./components/ErrorBoundary.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <ApiProvider api={trainersApi}>
        <BrowserRouter>
          <ErrorBoundary fallback="There was an Error">
            <App />
          </ErrorBoundary>
        </BrowserRouter>
      </ApiProvider>
    </Provider>
  </React.StrictMode>
);

Cod cu partea relevanta.
Ca se chioreste omu’ in prins screen uri

Cred ca te-ar ajuta typescript. :smiley:

Aici

const rootReducer = combineReducers({
  stars: starsSlice,
  trainersApi: trainersApi,
  search: searchSlice,
});

vezi ca iti trebuie reducer-ul la fiecare, nu slice-ul in sine.

Adica

const rootReducer = combineReducers({
  stars: starsSlice.reducer,
  [trainersApi.reducerPath]: trainersApi.reducer,
  search: searchSlice.reducer,
});

Aia e faza, ca la genul asta de state management … totul e relevant :sweat_smile: