Question

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

我写了两个独立的组件 1. MainPage.js及其对应的reducer MainPageReducer（Employee List） 2. PopupPage.js及其相应的reducer PopupPageReducer（Selected Employee）

这两个减速器如何共享状态？

Answer 1

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

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

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

您可以将员工数组映射到EmployeeList组件的employees属性，同时还将名为editEmployee（id）的调度函数映射到表中每行的单击函数。
您可以将[具有关联的editedEmployeeId的员工]映射到您的弹出组件的employees数组中的个别员工

使用一个减速器而不是两个减速器可能是有效的。具体来说，如果您正在对单个员工进行更新，那么您将调用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;
    }
}

我的回答有很多漏洞，因为你提出的问题可能过于宽泛;我假设您不完全了解连接，订阅和分派功能如何工作。

正如其中一条评论所说，减少者不共享状态。他们只需使用您的州的先前版本并返回其他版本。 无论如何，希望这会有所帮助。阅读redux文档！

Popup和Redux Reducers

1 个答案: