Создаю через .map ряд объектов, к ним добавляю значение из state, которое когда становится true, то анимация для каждого объекта срабатывает.
У этих объектов есть кнопки фильтры, они лежат в компоненте <FilterButtons />.
По нажатию на каждую из них фильтруется массив через .filter
и когда массив отфильтровался, объекты отрисовываются уже без анимации, потому что значение из state стало true при загрузке компонента и анимации сработали только для всего массива, но как сделать что бы анимация работала когда срабатывает фильтр? подскажите если кто знает, сломал голову уже. Вот код компонента и действий из Redux
Сам компонент:
class Projects extends Component {
componentDidMount() {
this.props.pageLoaded(); //делаю projectsPageLoaded: true в redux state через action (pageLoaded), поэтому вначале весь массив отображается с анимацией, но потом при применении фильтра к массиву анимации не срабатывают,потому что projectsPageLoaded остается true
}
render() {
const { projects, projectsPageLoaded } = this.props;
return (
<div>
<FilterButtons />
{
projects.map((project, idx) => {
return (
<CSSTransition
in={projectsPageLoaded}
timeout={300}
classNames="project-card">
<div>
{project.title}
</div>
</CSSTransition>
)
})
}
</div>
)
}
};
//state
const mapStateToProps = ({ projects, projectsPageLoaded}) => {
return { projects, projectsPageLoaded }
};
//action
const mapDispatchToProps = (dispatch) => {
return {
pageLoaded: () => dispatch({
type: 'PROJECT_PAGE_LOADED'
})
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Projects);
Действия Redux для фильтрации массива
const filter = (state, filter) => {
switch(filter) {
case'all':
return {
...initialState
}
case'react':
const react = initialState.projects.filter((item) => item.done);
return {
...state,
activeFilter: filter,
projects: react,
}
case'fullstack':
const fullstack = initialState.projects.filter((item) => !item.done);
return {
...state,
activeFilter: filter,
projects: fullstack
}
}
};
Reducer
const reducer = (state = initialState, action) => {
console.log(action.type);
//actions
switch (action.type) {
case 'PROJECT_PAGE_LOADED':
return {
...state,
projectsPageLoaded: true
};
case 'ON_FILTER_CHANGE':
return filter(state, action.payload)
default:
return state;
}
};
