Question

我正在使用react / redux来制作表编辑器。

<TableContainer name="Users" />

在容器中，我将其连接到redux存储：

@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!

所以我有两个问题：

如何动态创建store.tableData.Users和store.tableData.Products（使用初始状态）。
如何通过props方法访问@connect才能访问商店的适当部分？

Answer 1

您实际上可以访问@connect中的道具！使用react-redux，mapStateToProps回调函数接受两个参数，state和ownProps。

如果您的mapStateToProps函数声明为采用两个参数，它将以存储状态作为第一个参数并以道具作为第二个参数传递给连接的组件，并且每当连接的组件收到新的组件时，也将重新调用由浅层平等比较确定的道具。（第二参数通常按照惯例称为ownProps。）

尝试一下：

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

Answer 2

要以初始状态创建多个表，您确实要为每个组件创建一个表数据实例。一种执行此操作的方法如下：

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

将密钥添加到Redux存储中的每个组件

2 个答案: