我在多个页面的表格中显示服务器驱动的数据。

我目前有下表操作

pageChange
pageSizeChange
sort
load
loaded

我在一些需要触发加载的页面上有过滤器。

我有多个使用此功能的实体，它们将共享上述大部分逻辑，但需要单独的加载功能定义。

我的想法是采取将表 ID 作为参数的操作，然后具有一个 createTableReducer 函数，该函数也将采用此 ID 并将表节点挂载到实体中，类似于 react-redux-form 中的 createModelReducer|

如果不使用像 redux saga 这样的东西，我怎么能从我的通用操作中触发实体特定的加载操作？

我想知道如何创建一个高阶组件并将其传递给加载函数，但我认为这不会解决我的问题。我也可以从表组件本身调用更改操作和加载操作，但这似乎不是一个好的解决方案。

最佳答案

所以，这是一个非常开放的问题，实现它的可能性几乎是无限的……但是，无论如何我都会尝试一下。这个答案不是教条，它只是一种可能的实现方式。

让我们首先希望我们可以随心所欲地放置我们的 table 。要将一个表与另一个表区分开来，我们所要做的就是传递一个 tableId 属性，该属性将 Table 链接到存储中的相应数据。

<Table tableId='customers' />
<Table tableId='products' />
<Table tableId='orders' />
<Table tableId='transactions' />

接下来，让我们定义一个要使用的状态形状。每个顶级键都与我们希望为其存储数据的 tableId 相匹配。你可以把这个形状做成任何你喜欢的形状，但我提供这个是为了让你不必做太多的心理想象，因为我在后面的代码中引用了一些东西。您还可以根据需要命名顶级 tableId 键，只要您一致地引用它们即可。

{
   customers: {
     page: 0,
     sortBy: 'id',
     cols: [
       {id: 'id',         name: 'name'},
       {id: 'username',   name: 'Username'},
       {id: 'first_name', name: 'First Name'},
       {id: 'last_name',  name: 'Last Name'},
       ...
     ],
     rows: [
       {id: 1, username: 'bob', first_name: 'Bob', last_name: 'Smith', ...},
       ...
     ]
  },
  products: {
    ...
  },
  orders: {
    ...
  }
  ...
}

现在，让我们解决最困难的部分:Table 容器。一次要消化的东西很多，但别担心，我会逐一分解重要的部分。

容器/Table.js

import React from 'react';
import {connect} from 'react-redux';
import actions as * from './actions/';

const _Table = ({cols, rows, onClickSort, onClickNextPage}) => (
  <div>
    <table>
      <thead>
        <tr>
         {cols.map((col,key) => (
           <Th key={key} onClickSort={onClickSort(col.id)}>{col.name}</Th>
         )}
        </tr>
      </thead>
      <tbody>
        {rows.map((row,key) => ...}
      </tbody>
    </table>
    <button onClick={onClickNextPage}>Next Page</button>
  </div>
);

const Table = connect(
  ({table}, {tableId}) => ({    // example: if tableId = "customers" ...
    cols: table[tableId].cols,  // state.table.customers.cols
    rows: table[tableId].rows   // state.table.customers.rows
  }),
  (dispatch, {tableId}) => ({
    onClickSort: columnId => event => {
      dispatch(actions.tableSortColumn(tableId, columnId));
      // example: if user clicks 'last_name' column in customers table
      // dispatch(actions.tableSortColumn('customers', 'last_name'));
    },
    onClickNextPage: event => {
      dispatch(actions.tableNextPage(tableId))
    }
  })
)(_Table);

export default Table;

If you only learn one thing from this post, let it be this:

这里要注意的是 mapStateToProps 和 mapDispatchToProps accepts a second argument称为 ownProps。

// did you know you can pass a second arg to these functions ?
const MyContainer = connect({
  (state, ownProps) => ...
  (dispatch, ownProps) => ...
})(...);

在我上面写的容器中，我正在解构我们关心的每个变量。

// Remember how I used the container ?
// here ownProps = {tableId: "customers"}
<Table tableId="customers" />

现在看看我是如何使用connect

const Table = connect(
  // mapStateToProps
  ({table}, {tableId}) => ...
    // table = state.table
    // tableId = ownProps.tableId = "customers"


  // mapDispatchToProps
  (dispatch, {tableId}) => ...
    // dispatch = dispatch
    // tableId = ownProps.tableId = "customers"
)(_Table);

这样，当我们为底层组件 (_Table) 创建调度处理程序时，我们将在处理程序中获得可用的 tableId。如果您不希望 _Table 组件本身甚至不必关心 tableId 属性，这实际上有点不错。

接下来注意 onClickSort 函数的定义方式。

onClickSort: columnId => event => {
  dispatch(actions.tableSortColumn(tableId, columnId));
}

_Table 组件将此函数传递给 Th 使用

<Th key={key} onClickSort={onClickSort(col.id)}>{col.name}</Th>

看看它如何仅将columnId 发送到此处的处理程序？接下来，我们将了解 Th 是如何发送 event 的，它最终会调度 action。

组件/表/Th.js

import React from 'react';

const Th = ({onClickSort, children}) => (
  <th>
    <a href="#sort" onClickSort={event => {
      event.preventDefault();
      onClickSort(event);
    }}>{children}</a>
  </th>
);

export default Th;

如果您不需要 event，则没有必要保留它，但我想我会向您展示如何附加它，以防您想将其用于某些用途。

继续...

actions/index.js

您的操作文件将看起来非常标准。请注意，我们在每个表操作中提供了对 tableId 的访问。

export const TABLE_SORT_COLUMN = 'TABLE_SORT_COLUMN';
export const TABLE_NEXT_PAGE = 'TABLE_NEXT_PAGE';

export const tableSortColumn = (tableId, columnId) => ({
  type: TABLE_SORT_COLUMN, payload: {tableId, columnId}
});

export const tableNextPage = (tableId) => ({
  type: TABLE_NEXT_PAGE, payload: {tableId}
});

...

最后，您的 tableReducer 可能看起来像这样。同样，这里没有什么特别的。您将对操作类型执行常规 切换，然后相应地更新状态。您可以使用 action.payload.tableId 影响状态的适当部分。请记住我提出的状态形状。如果您选择不同的状态形状，则必须更改此代码以匹配

const defaultState = {
  customers: {
    page: 0,
    sortBy: null,
    cols: [],
    rows: []
  }
};

// deep object assignment for nested objects
const tableAssign = (state, tableId, data) =>
  Object.assign({}, state, {
    [tableId]: Object.assign({}, state[tableId], data)
  });

const tableReducer = (state=defaultState, {type, payload}) => {
  switch (type) {
    case TABLE_SORT_COLUMN:
      return tableAssign(state, payload.tableId, {
        sortBy: payload.columnId
      });
    case TABLE_NEXT_PAGE:
      return tableAssign(state, payload.tableId, {
        page: state[payload.tableId].page + 1
      });
    default:
      return state;
  }
};

备注:

我不打算讨论表数据的异步加载。这样的工作流程已经在 redux 文档中得到了很好的详细说明:Async Actions .您可以选择 redux-thunk、redux-promise 或 redux-saga。选择你最了解的!正确实现 TABLE_DATA_FETCH 的关键是确保像我在其他 onClick* 中那样发送 tableId(以及您需要的任何其他参数) > 处理程序。

关于javascript - react redux 架构表操作和缩减器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35841558/