Javascript React Redux MapStateTrops在单个容器中用于多个状态

免责声明：这是我参与的第一个React/Redux项目。只是试图在项目负责人外出度假时通过编辑一些现有代码来填充

当前，应用程序管理一个

数据表

，该表通过对另一台服务器的API调用进行更新。我想添加一个单独的state

id

，它管理通过表单更新的

数据的标识符，以便表单按钮上的表数据发生更改

我相信我在使用
MapStateTops
功能时遇到了问题，希望进行一次健康检查。我之所以说相信，是因为在应用程序中其他一切看起来都是正确的，而且我认为这是
mapStateToProps
的问题，更多的是通过排除过程而不是完全冒烟的枪

原始的
MapStateTops
编写如下，以管理
数据表

function mapStateToProps({ data: { data, ...state } }) {
  const mappedDatas = data.map((data) => {
    return Object.assign({}, data, { data: new Array(data) });
  });

  return {
    ...state,
    datas: mappedDatas,
  };
}

我建议对
数据添加
id
的更改如下

function mapStateToProps({ data: { data, ...state } }) {
  const mappedDatas = data.map((data) => {
    return Object.assign({}, data);
  });

  return {
    ...state,
    datas: mappedDatas,
    id: state.id,
  };
}

多谢各位


编辑：添加零部件和减速器

还原剂
data.js

import * as TYPES from '../constants/actionTypes';

const data = {
  data: [],
  dataModalOpen: false,
};

export default function dataReducer(state = data, action) {
  switch (action.type) {
    case TYPES.LOAD_DATAS_REQUEST:
      return Object.assign({}, state, { loading: true });

    case TYPES.LOAD_DATAS_SUCCESS:
      return Object.assign({}, state, { data: [...action.payload], loading: false });

    case TYPES.LOAD_DATAS_ERROR:
      return Object.assign({}, state, { loading: false });

    default:
      return state;
  }
}

import * as TYPES from '../constants/actionTypes';

const id = {
  id: [],
  dataModalOpen: false,
};

export default function dataReducer(state = id, action) {
  switch (action.type) {
    case TYPES.OPEN_DATA_MODAL:
      return Object.assign({}, state);

    case TYPES.CLOSE_DATA_MODAL:
      return Object.assign({}, state);

    case TYPES.FIND_ID_REQUEST:
      return Object.assign({}, state, { loading: true });

    case TYPES.FIND_ID_SUCCESS:
      return Object.assign({}, state, { idData: [...state.id, { ...action.payload}] });

    case TYPES.FIND_ID_ERROR:
      return Object.assign({}, state, { loading: false });

    default:
      return state;
  }
}

id.js

import * as TYPES from '../constants/actionTypes';

const data = {
  data: [],
  dataModalOpen: false,
};

export default function dataReducer(state = data, action) {
  switch (action.type) {
    case TYPES.LOAD_DATAS_REQUEST:
      return Object.assign({}, state, { loading: true });

    case TYPES.LOAD_DATAS_SUCCESS:
      return Object.assign({}, state, { data: [...action.payload], loading: false });

    case TYPES.LOAD_DATAS_ERROR:
      return Object.assign({}, state, { loading: false });

    default:
      return state;
  }
}

import * as TYPES from '../constants/actionTypes';

const id = {
  id: [],
  dataModalOpen: false,
};

export default function dataReducer(state = id, action) {
  switch (action.type) {
    case TYPES.OPEN_DATA_MODAL:
      return Object.assign({}, state);

    case TYPES.CLOSE_DATA_MODAL:
      return Object.assign({}, state);

    case TYPES.FIND_ID_REQUEST:
      return Object.assign({}, state, { loading: true });

    case TYPES.FIND_ID_SUCCESS:
      return Object.assign({}, state, { idData: [...state.id, { ...action.payload}] });

    case TYPES.FIND_ID_ERROR:
      return Object.assign({}, state, { loading: false });

    default:
      return state;
  }
}

组件
DatasTable.jsx

/* @flow */

import React from 'react';
import { Paper, Toolbar, ToolbarGroup, ToolbarTitle, Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn, IconButton } from 'material-ui';
import ContentAdd from 'material-ui/svg-icons/content/add';
import Loader from './Loader';

type PropsType = {
  datas: Array<{
    foo: string,
    bar: string,
  }>,
  id: string,
  loading: boolean,
  onAdd: Function,
  onSelect: Function,
};

export default function({ datas, loading, onAdd, onSelect }: PropsType) {
  return (
    <Paper>
      <Toolbar>
        <ToolbarGroup>
          <ToolbarTitle text="Data" />
        </ToolbarGroup>

        <ToolbarGroup>
          <IconButton touch onClick={onAdd}>
            <ContentAdd />
          </IconButton>
        </ToolbarGroup>
      </Toolbar>

      <Loader loading={loading}>
        <Table onRowSelection={onSelect}>
          <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
            <TableRow>
              <TableHeaderColumn>Foo</TableHeaderColumn>
              <TableHeaderColumn>Bar</TableHeaderColumn>
            </TableRow>
          </TableHeader>

          <TableBody displayRowCheckbox={false} showRowHover>
            {
              datas.map(({ foo, bar }) => (
                <TableRow key={foo}>
                  <TableRowColumn>{foo}</TableRowColumn>
                  <TableRowColumn>{bar}</TableRowColumn>
                </TableRow>
              ))
            }
          </TableBody>
        </Table>
      </Loader>
    </Paper>
  )
}

/* @flow */

import React from 'react';
import { Paper, TextField, RaisedButton } from 'material-ui';

type PropsType = {
  id: Array<{
    idData: string,
  }>,  
  onSubmit: Function,
  onChange: Function,
};

export default function({ id, onSubmit, onChange }: PropsType) {

  return (
    <Paper>
      <form onSubmit={onSubmit}>
        <TextField
          name="id"
          onChange={onChange}
          floatingLabelText="Identifier Key"
          value={id}
        />

        <RaisedButton
          label="Find"
          primary
          type="submit"
        />
      </form>
    </Paper>
  )
}

现在发生了什么？您是否有可以发布的错误/警告/日志？另外，state.id的值是多少？谢谢您的回复
state.id
作为
[object object]
返回。没有警告日志，状态正确启动，如下所示<代码>对象数据：对象数据：数组[1]dataModalOpen:false加载：false\uuuu协议：对象id:Object dataModalOpen:false id:Array[0]加载：true\uuuu协议：对象通知：数组[0]路由：对象服务：Object\uuu协议：Object
mapStateToProps完全错误。它不应该只是返回状态。它不需要使用Object.assign。将任何东西命名为“数据”都是一个可怕的想法。将多个事物命名为“数据”是非常令人困惑的
id
可能不应该是日期本身的属性，而应该是更多同类对象列表中的某个子对象的属性。如果没有更多的代码（减速机、组件），我就说不出更多了。此外，mapStateToProps不管理数据。它从状态中拾取数据以传递给组件。它有时可以格式化数据以适合组件。但状态由减速器管理。请注意，您正在修改的原始mapStateToProps已完全错误。不要使用
新数组（x）
只需使用
[x]
，但此处不需要或不使用它。请将所有名为“data”的内容重命名为它的实际名称，这样就不会太混乱。不幸的是，这很难理解，如果没有深入的研究，很难说它有用，而深入的研究可能会从更恰当的命名开始。这就像解码模糊代码。另外，
data
是
datum
的复数形式，因此
datas
不是一个词。现在发生了什么？您是否可以发布错误/警告/日志？另外，state.id的值是多少？谢谢您的回复
state.id
作为
[object object]
返回。没有警告日志，状态正确启动，如下所示<代码>对象数据：对象数据：数组[1]dataModalOpen:false加载：false\uuuu协议：对象id:Object dataModalOpen:false id:Array[0]加载：true\uuuu协议：对象通知：数组[0]路由：对象服务：Object\uuu协议：Object
mapStateToProps完全错误。它不应该只是返回状态。它不需要使用Object.assign。将任何东西命名为“数据”都是一个可怕的想法。将多个事物命名为“数据”是非常令人困惑的
id
可能不应该是日期本身的属性，而应该是更多同类对象列表中的某个子对象的属性。如果没有更多的代码（减速机、组件），我就说不出更多了。此外，mapStateToProps不管理数据。它从状态中拾取数据以传递给组件。它有时可以格式化数据以适合组件。但状态由减速器管理。请注意，您正在修改的原始mapStateToProps已完全错误。不要使用
新数组（x）
只需使用
[x]
，但此处不需要或不使用它。请将所有名为“data”的内容重命名为它的实际名称，这样就不会太混乱。不幸的是，这很难理解，如果没有深入的研究，很难说它有用，而深入的研究可能会从更恰当的命名开始。这就像解码模糊代码。而且
data
是
datum
的复数形式，因此
datas
不是一个词。