1

Я пишу 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)

2 ответа 2

1

Правильно будет использовать стандартную функцию redux'а combineReducers(...reducers) которая возвращает один reducer

2
  • я так и делаю, вопрос в другом, вызывать ли мне мне два диспатчера в реакт-компоненте или же только один, но который будет связывать два редьюсера
    – Draktharon
    Commented 25 июл. 2020 в 15:26
  • Ну так логично будет вызывать один диспатч редьюсера полученного при комбинировании ибо какой тогда смысл комбинировать?
    – Vladimka
    Commented 25 июл. 2020 в 16:28
0

Для этого я могу либо уже в реакт-компоненте вызывать два невзаимосвязанных экшена из двух редьюсеров, либо же могу связать эти два редьюсера и вызывать один экшен в реакт-компоенте, что из этого будет правильным?

Правильно вызывать метод dispatch() для каждого конкретного action'a:

// внутри компонента

const dispatch = useDispatch()

dispatch({ type: "ADD_PAGE", payload })
dispatch({ type: "ADD_TODO", payload })

таким образом все слушатели которые подписаны на каждый из этих отдельных экшенов и их side-effect'ы (при их наличии) отработают корректно.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.