Разработка действий Redux и редукторов для компонента повторного использования React

Я разрабатываю большое приложение с Redux и React, и я решил сделать некоторые повторно используемые компоненты, такие как пользовательские флажки и переключатели.

Поскольку я хочу хранить эту информацию в хранилище Redux, чтобы иметь возможность легко отлаживать состояние приложения, и тот же компонент имеет одинаковую функциональность во всем мире, представляется хорошей идеей создавать редукторы и действия для каждого компонента.

Однако редукторы Redux возвращают новое состояние и сохраняют его в магазине с именем редуктора в качестве ключа, и это запрещает иметь более одного компонента одного и того же типа на той же странице, используя те же действия и редукторы, но сохраняя разные состояния.

Я думаю, что есть две проблемы:

Создайте различные действия и редукторы для каждого используемого компонента, даже подумайте, что компонент и его функции одинаковы. Это решение не кажется хорошим решением, потому что будет много избыточного кода.
Создавайте действия с достаточными параметрами, чтобы иметь возможность различать каждый в редукторе и тем самым изменять только часть указанного состояния.

Я пошел вперед со вторым вариантом.

Файл действий для компонента CheckBox:

import {createAction} from 'redux-actions';

/****** Actions ******/
export const CHANGE_CHECKBOX_STATE = "CHANGE_CHECKBOX_STATE";

/****** Action creators ******/
export const changeCheckboxState = createAction(CHANGE_CHECKBOX_STATE, (block, name, state) => {
  return {
    block,
    name,
    state: {
      checked: state,
    }
  };
});

Файл редукторов для компонента CheckBox:

import {handleActions} from 'redux-actions';

import {CHANGE_CHECKBOX_STATE} from './CheckBox.actions';

export const checkBoxComponent = handleActions({
  CHANGE_CHECKBOX_STATE: (state, action) => ({
    [action.payload.block]: {
      [action.payload.name]: action.payload.state
    }
  })
}, {});

Я использую block, чтобы указать страницу, name, чтобы указать имя конкретного компонента (например, пол) и указать состояние и объект с новым состоянием.

Но это решение также имеет некоторые проблемы:

Невозможно указать начальное состояние каждого компонента, так как клавиши состояния являются динамическими.
Усложняет много структуры хранилища с большим количеством вложенных состояний.
Агрессирует данные по компонентам, а не по форме, что затруднит отладку и логически неверно.

У меня недостаточно опыта работы с Redux и React, чтобы думать о лучшем решении этой проблемы. Но мне кажется, что мне не хватает чего-то важного в отношении отношений React-Redux, и это вызывает некоторые вопросы:

Хорошо ли хранить состояние этих повторно используемых компонентов в хранилище Redux?
Я ошибаюсь в связывании. Реагируйте компоненты с действиями Redux и редукторами?

Ответ 1

Не описывайте свои редукторы Redux (общее состояние приложения) с точки зрения компонентов, которые потребляют это состояние. Отслеживайте это по-другому, описывая состояние вашего приложения описательным образом, а затем ваши "немые" компоненты потребляют это описательное состояние.

Вместо отслеживания "Состояние этого флажка для формы, связанной с foo", отслеживайте "это логическое значение foo", а затем установите флажок в этом состоянии.

Пример хранилища для флажка:

const initialState = {
    someFooItem: { isCertainType: false }
};

export function foos(state = initialState, action) {
    switch(action.type){
        case(UPDATE_FOO_VALUE):
            return {
                ...state, 
                [action.payload.id]: {
                    isCertainType: action.payload.isCertainType
                }
            }
    }
}

Пример флажка, использующего хранилище

class CheckBox extends React.Component {
    render() {
        return <input type="checkbox" checked={this.props.checked} />
    }
}

Родительский компонент

class ParentComponent extends React.Component {
     render() {
         return <CheckBox checked={this.foo.isCertainType} />
     }
}

Ответ 2

Основная ошибка здесь в том, что у вас есть 0 немых компонентов. Базовые элементы управления, такие как флажки, должны быть немыми компонентами, используя только реквизиты, их родитель несет ответственность за выбор и обновление правильной части состояния для определенного флажка.