Reactjs 为每个组件向redux存储添加密钥

我正在使用react/redux制作一个表编辑器

<TableContainer name="Users" />

我有一个用于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

所以我有两个问题：

如何动态创建

store.tableData.Users

和

store.tableData.Products

（使用初始状态）

如何访问

@connect

方法中的

道具

，以访问商店的适当部分

---

你确实可以在@connect中使用道具！使用react-redux，回调函数接受两个参数，

state

和

ownProps

如果MapStateTops函数声明为使用两个参数， 将使用存储状态作为第一个参数和 作为第二个参数传递给连接组件的道具，以及 也将在连接的组件收到新消息时重新调用 由浅相等比较确定的道具。（二） 按照惯例，参数通常称为ownProps。）

试试这个：

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

---

要使用初始状态创建多个表，您确实需要为每个组件创建表数据的实例。一种方法是：

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)
}

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)
}