Помогите пожалуйста найти ошибку, ошибка заключатся в том что происходит отрисовка 2 одинаковых массива 'users' вместо 1
1.Редьюсер :
let UsersState = {
users: []
}
const UsersReducer = (state = UsersState, action) => {
switch (action.type){
case FOLLOW: return {
...state,
users: state.users.map(user => {
if (user.id === action.userId) {
return {...user, Followed: true}
}
return user;
})
}
case UN_FOLLOW: return {
...state,
users: state.users.map(user => {
if (user.id === action.userId) {
return {...user, Followed: false}
}
return user;
})
}
case SET_USERS: return {
...state,
users: [...state.users, ...action.users]
}
default :
return state;
}
}
export default UsersReducer;
const FOLLOW = 'FOLLOW';
const UN_FOLLOW = 'UN_FOLLOW';
const SET_USERS = 'SET_USERS'
export const SET_USERS_AC = (users) => ({type: SET_USERS, users})
export const FOLLOW_AC = (userId) => ({type: FOLLOW, userId})
export const UN_FOLLOW_AC = (userId) => ({type: UN_FOLLOW, userId})
2.Store
import { combineReducers, legacy_createStore as createStore } from "redux";
import dialogsPageReducer from "./dialogsPageReducer";
import EasyMathReducer from "./EasyMathReducer";
import FriendsSideReducer from "./FriendSidereducer";
import MainInfoDOMReducer from "./MainInfoDOMReducer";
import UsersReducer from "./UsersReducer";
let reducers = combineReducers({
dialogsPage: dialogsPageReducer,
MainInfoDOM: MainInfoDOMReducer,
friendsside: FriendsSideReducer,
UsersDatabase: UsersReducer,
EasyMathData: EasyMathReducer
})
let store = createStore(reducers);
export default store;
3.Container Component
import { connect } from 'react-redux';
import { FOLLOW_AC, SET_USERS_AC, UN_FOLLOW_AC } from '../../redux/UsersReducer';
import Users from './Users';
const MapStateToProps = (state) => {
debugger;
return {
users: state.UsersDatabase.users
}
}
const MapDispatchToProps = (dispatch) => {
return {
Follow: (UserID) => {
dispatch(FOLLOW_AC(UserID))
},
UnFollow : (UserID) => {
dispatch(UN_FOLLOW_AC(UserID))
},
SetUsers: (Users) => {
dispatch(SET_USERS_AC(Users))
}
}
}
const UsersConatiner = connect(MapStateToProps, MapDispatchToProps)(Users)
export default UsersConatiner;
4.Презентационная Component
import React from "react"
import s from './Users.module.css'
const Users = (props) => {
if (props.users.length === 0) {
debugger
props.SetUsers([
{ id: 1, city: 'Rostov-On-Don', gender: 'male', name: 'dimasik', photo: 'https://www.meme-arsenal.com/memes/5dcd40a9d88d7d20191fd72213cb73c3.jpg', Followed: false },
{ id: 2, city: 'School76', gender: 'Female', name: 'IvanGrudi', photo: 'https://media.npr.org/assets/img/2017/09/12/macaca_nigra_self-portrait-3e0070aa19a7fe36e802253048411a38f14a79f8-s1100-c50.jpg', Followed: true },
{ id: 3, city: 'Dagestan', gender: 'male', name: 'Daniyal', photo: 'https://i.pinimg.com/736x/00/14/68/00146854117cd2b80bb267e0debf8ff0.jpg', Followed: true },
{ id: 4, city: 'Ass', gender: 'male', name: 'Ruslan', photo: 'https://i.ytimg.com/vi/xX1QWRNmw_c/maxresdefault.jpg', Followed: true },
{ id: 5, city: 'Moscow', gender: 'male', name: 'Galya', photo: 'https://i.ytimg.com/vi/cMixzK4k8bA/mqdefault.jpg', Followed: false }
])
}
return <div>{
props.users.map(u =>
<span className={s.User} key={u.id}>
<div className={s.FBlock}>
<img src={u.photo} className={s.FBlockPic} />
{u.Followed ? <button className={s.ButtonDelete} onClick={() => { props.UnFollow(u.id) }}>Delete Friend</button> : <button className={s.ButtonAdd} onClick={() => { props.Follow(u.id) }}>Add Friend</button>}
</div>
<div className={s.SBlock}>
<div>{u.name}</div>
<div>{u.city}</div>
<div>{u.gender}</div>
</div>
</span>
)
}</div>
}
export default Users;
Источник: Stack Overflow на русском