Я пишу ToDo-приложение на связке React + Redux.
В нем на данный момент есть два редьюсера: один отвечает за действия над задачами(задачи можно создавать/удалять/редактировать/переносить в одну из категорий/сортировать/фильтровать), а второй отвечает за действия над категориями задач(категории можно создавать/удалять/редактировать).
Допустим при выборе отдельной категории я хочу чтобы список задач менялся, но при этом мне нужно одновременно поменять стэйт и в редьюсере для категорий и в редьюсере для задач.
Для этого я могу либо уже в реакт-компоненте вызывать два невзаимосвязанных экшена из двух редьюсеров, либо же могу связать эти два редьюсера и вызывать один экшен в реакт-компоенте, что из этого будет правильным?
todoReducer:
import {
ADD_TODO
} from "./actions";
const defaultState = {
todoList: [
//задачи представлены в виде объектов
]
}
export const todoReducer = (state = defaultState, action) => {
switch (action.type) {
case ADD_TODO:
...
default: return state;
}
}
navReducer:
import {
ADD_PAGE
} from "./actions";
const defaultState = {
navList: [
//категории представлены в виде объектов
],
currentPage: 0
}
export const navReducer = (state = defaultState, action) => {
switch (action.type) {
case ADD_PAGE:
...
default: return state;
}
}
Экшены отправляются в компонент через умные компоненты:
import React from 'react';
import TodoNav from './TodoNav';
import { connect } from 'react-redux';
import {
addPage
} from '../../store/todoNav/actions'
class TodoNavContainer extends React.Component {
render() {
return (
<TodoNav {...this.props} />
)
}
}
const mapStateToProps = (state) => {
return {
navList: state.todoNav.navList,
}
}
const mapDispatchToProps = {
addPage
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoNavContainer)