Добавить ключ к избыточному хранилищу для каждого компонента

Question

Я использую реагирование / избыточность, чтобы создать редактор таблиц.

<TableContainer name="Users" />

В контейнере я подключаю его к хранилищу приставок:

@connect((store)=> {
    return {
        tableData: store.tableData
    }
})

У меня есть редуктор для tableData:

//tableDataReducer.js

const initialState = {
    fetchingRows: false,
    rows: [],
    selected: [],
    mass_editing_col_name: '',
    editing_row_id: null,
    //etc...
};

Это прекрасно работает, когда у меня только одна таблица на странице. Но когда я пытаюсь использовать две таблицы на одной странице, они конкурируют за tableData из магазина:

<TableContainer name="Users" />
<TableContainer name="Products" />
//These tables both fight over store.tableData

Я думаю, мне нужно сделать что-то вроде этого:

@connect((store)=> {
    return {
        tableData: store.tableData[this.props.name]
    }
})
//I don't have access to props though, and store.tableData.Users doesnt exist anyways!

Итак, у меня два вопроса:

1. Как я могу динамически создавать store.tableData.Users и store.tableData.Products (используя начальное состояние).
2. Как получить доступ к props в методе @connect, чтобы получить доступ к нужной части магазина?

Answer 1

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

const initialState = {
    Users: {
        fetchingRows: false,
        rows: [],
        selected: [],
        mass_editing_col_name: '',
        editing_row_id: null,
        //etc...
    },
    Products: {
        fetchingRows: false,
        rows: [],
        selected: [],
        mass_editing_col_name: '',
        editing_row_id: null,
        //etc...
    }
}

Вы также можете сделать что-то вроде:

const emptyDataTable = {
    fetchingRows: false,
    rows: [],
    selected: [],
    mass_editing_col_name: '',
    editing_row_id: null,
    //etc...
};

const initialState = {
    Users: object Object.assign({}, emptyDataTable),
    Products: Object.assign({}, emptyDataTable)
}

Answer 2

У вас действительно есть доступ к реквизиту в @connect! При реагировании с избыточностью обратный вызов mapStateToProps принимает два аргумента: state и ownProps.

.

Если ваша функция mapStateToProps объявлена ​​как принимающая два параметра, он будет вызываться с состоянием хранилища в качестве первого параметра и реквизиты, передаваемые подключенному компоненту в качестве второго параметра, и также будет повторно вызываться всякий раз, когда подключенный компонент получает новый реквизит, как это определено сравнениями в неглубоком равенстве. (Второй параметр обычно упоминается как ownProps по соглашению.)

Попробуйте это:

@connect((state, ownProps) => {
  return {
    tableData: state.tableData[ownProps.name]
  }
})