Question

我正在使用 ReactJs、Redux 和 Firebase 构建一个电影流媒体应用。在设置 firebase 和 redux 之前，我一切都很好。但是，当我开始在组件中使用 Redux 减速器、动作等时，我在使用“useDispatch”时遇到了错误。以下是浏览器中显示的错误：

enter image description here

我还附上了下面各种JS文件的代码片段；

movieSlice.js：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  movies: [],
};

const movieSlice = createSlice({
  name: 'movie',
  initialState,
  reducer: {
    setMovies: (state, action) => {
      state.movies = action.payload;
    },
  },
});

export const { setMovies } = movieSlice.actions;

export const selectMovies = (state) => state.movie.movies;

export default movieSlice.reducer;

store.js：

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

export const store = configureStore({
  reducer: {
    movie: movieReducer,
  },
});

Home.js

import React, { useEffect } from 'react';
import styled from 'styled-components';
import db from '../firebase';
import { useDispatch } from 'react-redux';
import { setMovies } from '../features/movie/movieSlice';
import HomeBackground from '../Assets/images/home-background.png';
import ImgSlider from './ImgSlider';
import Movies from './Movies';
import Viewers from './Viewers';

function Home() {
  const dispatch = useDispatch();
  useEffect(() => {
    db.collection('movies').onSnapshot((snapshot) => {
      let tempMovies = snapshot.docs.map((doc) => {
        return { id: doc.id, ...doc.data() };
      });
      dispatch(setMovies(tempMovies));
    });
  }, []);

  return (
    <Container>
      <ImgSlider />
      <Viewers />
      <Movies />
    </Container>
  );
}

export default Home;

const Container = styled.main`
  min-height: calc(100vh - 70px);
  padding: 0 calc(3.5vw + 5px);
  position: relative;
  overflow-x: hidden;
  &:before {
    background: url(${HomeBackground}) center center / cover no-repeat fixed;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
`;

如果您想查看整个项目代码，我将链接以下项目的 Github 存储库链接： https://github.com/ArunMurugavel24/Disney_Plus-Clone

请帮我纠正这个错误，这对我会有很大的帮助。

提前致谢。

“TypeError: Object(...) is not a function”，在 react redux 中使用 dispatch 时出错

0 个答案: