弹出和 Redux 减速器

Question

我想知道如何使用 redux reducer 处理特定用例。举个例子，假设我有一个带有 DataGrid/Table 的表单。在编辑按钮上单击一行，我想用选定的行数据打开弹出窗口。编辑数据后，点击 Popup-Submit 按钮，我想更新 Table/DataGrid（即 DataGrid 现在应该有编辑后的值）。

我写了两个独立的组件 1. MainPage.js 及其对应的reducer MainPageReducer（员工列表） 2. PopupPage.js 及其对应的reducer PopupPageReducer(Selected Employee)

这两个reducer如何共享状态？

Answer 1

您可能需要先阅读此内容 http://redux.js.org/docs/basics/UsageWithReact.html

主要概念是通过 connect 函数，您只需将所需的状态属性映射到组件的属性，即 MapStateToProps。所以在你的情况下，假设你的状态，出于人为的目的，是这样构造的：

{employees: {employees: {1: {id: 1, name: 'Foo'}}, editedEmployeeId: 1}

• 您可以将员工数组映射到 EmployeeList 组件的员工属性，同时还将名为 editEmployee(id) 的调度函数映射到表中每一行的点击函数。
• 您可以将 [具有关联的已编辑员工 ID 的员工] 映射到您的员工数组中用于弹出组件的单个员工

只使用一个减速器而不是两个可能会更有效。 具体来说，如果您要更新单个员工，那么您将调用 EDIT_EMPLOYEE 操作，然后在保存时调用 SAVE_EMPLOYEE 操作。在 SAVE_EMPLOYEE 操作之后，我假设你会调用一个 post 方法，然后 react-redux 会重新渲染你的整个列表。

它可能看起来像这样：

function employees(state = {editedEmployeeId: undefined, employees = []}, action) {
    switch(action.type) {
        case EDIT_EMPLOYEE:
            return Object.assign({}, state, {editedEmployee: action.employee_id})
        case SAVE_EMPLOYEE:
            return Object.assign({}, state, {employees: action.employees});
        default:
            return state;
    }
}

我的回答有很大的漏洞，因为你问的问题可能太宽泛了；我假设您不完全了解连接、订阅和调度功能的工作原理。

就像其中一位 cmets 所说，reducer 不共享状态。他们只是获取您状态的先前版本并返回它的另一个版本。 无论如何，希望这会有所帮助。阅读 redux 文档！