如何使用redux链接反应，通过点击心形在收藏夹页面上显示，将选定的电影添加和删除到阵列中

Question

如何使用redux链接反应，通过点击心形将选定的电影添加到阵列中并将其显示在收藏夹页面上

Bellow my redux:

动作：

export function addMovie(id) {
return {
type: 'ADD_MOVIE',
payload: id
}
}
export function removeMovie(id) {
return {
type: 'REMOVE_MOVIE',
payload: id
}
}

减速器：

function favouriteReducer(state = [], action) {
switch(action.type) {
case 'ADD_MOVIE':
return {
items: state.items.concat(action.payload)
}
case 'REMOVE_MOVIE':
return {
items: state.items.filter(item => item !== action.payload)
}
default:
return state;
}
}
export default favouriteReducer;

存储：

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import favouriteReducer from "./reducers/favouriteReducer";
const redusers = combineReducers({
favourite: favouriteReducer,
});
const store = createStore(redusers, composeWithDevTools(applyMiddleware(thunk)));
export default store;

和我的组件，在那里我需要点击添加或删除选择的电影

import React, { useEffect, useState } from "react";
import './index.css';
import { Link, useParams } from "react-router-dom";
import { connect } from 'react-redux';
import { addMovie } from "../../../../redux/actions/favouriteMovie";
import store from "../../../../redux";
const MoviesContext = React.createContext();
const { Provider } = MoviesContext;
const Movie = (props, {addMovie, movies}) => {
const [active, setActive] = useState(false)
let onClick = (e) => {
e.preventDefault();
console.log('hello');
setActive(!active);
addMovie(movies);
}

return (
<Provider store={{movies, addMovie}}>
<Link to= {"/modal/:"+`${props.id}`} id={props.id} className={'movie'}>
<img src={"https://image.tmdb.org/t/p/w500/"+props.poster_path} alt={props.title} className={'main'}/>
<h1 className={'title'}>{props.title}</h1>
<div>
<svg className={active ? 'activeimg' : 'heart'}  onClick={onClick} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/></svg>
<p className={'text'}>{props.release_date}</p>
</div>
</Link>
</Provider>
);
};
export {
MoviesContext
};
function mapStateToProps(state){
return {
movies: state.movie.movies
}
}
const mapDispatchToProps = {
addMovie: addMovie,
}
export default connect(mapStateToProps, mapDispatchToProps)(Movie);

我不知道如何在组件中完成它。

非常感谢你的帮助！

Answer 1

您需要更改您的"mapDispatchToProps"；将调度作为参数但是，为什么上下文和重叠之间的混合呢？

import React, { useEffect, useState } from 'react';
import './index.css';
import { Link, useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { addMovie } from '../../../../redux/actions/favouriteMovie';
import store from '../../../../redux';
const MoviesContext = React.createContext();
const { Provider } = MoviesContext;
const Movie = (props, { addMovie, movies }) => {
const [active, setActive] = useState(false);
const onClick = (id) => {
console.log('hello');
setActive(!active);
props.addMovie(id);
};
return (
<Provider store={{ movies, addMovie }}>
<Link to={'/modal/:' + `${props.id}`} id={props.id} className={'movie'}>
<img src={'https://image.tmdb.org/t/p/w500/' + props.poster_path} alt={props.title} className={'main'} />
<h1 className={'title'}>{props.title}</h1>
<div>
<svg className={active ? 'activeimg' : 'heart'} onClick={() => onClick(props.id)} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z" />
</svg>
<p className={'text'}>{props.release_date}</p>
</div>
</Link>
</Provider>
);
};
export { MoviesContext };
function mapStateToProps(state) {
return {
movies: state.movie.movies,
};
}
const mapDispatchToProps = {
addMovie: addMovie,
};
const mapDispatchToProps = (dispatch) => {
return {
addMovie: (id) => dispatch(addMovie(id)),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Movie);