Question

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

我目前有以下表格动作

pageChange
pageSizeChange
sort
load
loaded

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

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

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

如何在不使用像redux saga这样的东西的情况下触发我的通用操作中的实体特定加载操作？

我想知道创建更高阶的组件并将其传递给加载函数，但我不认为这会解决我的问题。我也可以从表组件本身调用更改操作和加载操作，但这并不是＆＃39;看起来像是一个很好的解

Answer 1

所以，这是一个相当开放的问题，实现这个问题的可能性几乎是无限的......但是，无论如何我都会对它进行一次攻击。这个答案不是学说，只是一种可能的方法。

让我们开始希望我们可以随时随地摆放桌子。要将一个表与另一个表区分开来，我们所要做的就是传递一个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;

如果你只从这篇文章中学到一件事，就这样吧：

此处需要注意的是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的，最终会调度该行为。

<强>组件/表/ 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，但我想我会告诉您如何附加它以防您想要使用它东西。

继续......

操作/ 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可能看起来像这样。再说一遍，这里没什么特别的。您将对操作类型执行常规switch，然后相应地更新状态。您可以使用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的关键是确保您发送tableId（以及您需要的任何其他参数），就像我在其他onClick*处理程序中一样。

反应redux架构表动作和减速器

1 个答案: