Не совсем понимаю, что я могу сделать, чтобы при клике менялось состояние только у той кнопки, на которой был клик произведён?
это родительский компонент:
import React, { Component } from "react";
import CardMovie from "../cardMovie/CardMovie";
const defaultMovies = [
{
Title: "Звёздные войны"
},
{
Title: "Звёздный десант"
}
];
class HomePage extends Component {
render() {
console.log(this.state);
if (defaultMovies.length > 0) {
return (
<div className="container">
<ul className="list-movies">
{defaultMovies.map(film => {
return (
<li>
<h2>{film.Title}</h2>
<CardMovie />
</li>
);
})}
</ul>
</div>
);
}
return (
<div className="container">
<h1>Hello world</h1>
</div>
);
}
}
export default HomePage;
А это два компонента кнопки:
import React, { Component } from "react";
import { connect } from "react-redux"; // связывает стейт со стором
import { toggleButtonWatched } from "../../store/actions/actions";
class AddToWatched extends Component {
render() {
return (
<React.Fragment>
<button type="button" name="AddToWatched" onClick={this.props.isToggle}>
{this.props.bool
? "Добавить в просмотренные"
: "Убрать из просмотренного"}
</button>
</React.Fragment>
);
}
}
function mapStateToProps(state) {
return {
bool: state.toggleButton.boolWatched
};
}
function mapDispatchToProps(dispatch) {
return {
isToggle: () => dispatch(toggleButtonWatched())
};
}
export default connect(mapStateToProps, mapDispatchToProps)(AddToWatched);
import React, { Component } from "react";
import { connect } from "react-redux"; // связывает стейт со стором
import { toggleButtonFavorite } from "../../store/actions/actions";
class AddToFavorite extends Component {
render() {
return (
<React.Fragment>
<button
type="button"
name="AddToFavorite"
onClick={this.props.isToggle}
>
{this.props.bool ? "Добавить в избранное" : "Убрать из избранных"}
</button>
</React.Fragment>
);
}
}
function mapStateToProps(state) {
return {
bool: state.toggleButton.boolFavorite
};
}
function mapDispatchToProps(dispatch) {
return {
isToggle: () => dispatch(toggleButtonFavorite())
};
}
export default connect(mapStateToProps, mapDispatchToProps)(AddToFavorite);
у redux тоже код простой
import { combineReducers } from "redux";
import { toggleButton } from "./buttonReducer";
export default combineReducers({
toggleButton
});
import { CHANGE_FAVORITE, CHANGE_WATCHED } from "./actionsTypes";
export function toggleButtonFavorite() {
return {
type: CHANGE_FAVORITE,
};
}
export function toggleButtonWatched() {
return {
type: CHANGE_WATCHED,
};
}
import { CHANGE_FAVORITE, CHANGE_WATCHED } from "../actions/actionsTypes";
const initialState = {
boolWatched: true,
boolFavorite: true
};
export function toggleButton(state = initialState, action) {
switch (action.type) {
case CHANGE_WATCHED:
return {
boolWatched: !state.boolWatched,
boolFavorite: state.boolFavorite
};
case CHANGE_FAVORITE:
return {
boolWatched: state.boolWatched,
boolFavorite: !state.boolFavorite
};
default:
return state;
}
}