Question

免责声明：这是我参与的第一个React / Redux项目。只需在项目所有者离开度假时通过编辑现有代码来填写。

目前，该应用程序管理一个data表，该表通过API调用更新到另一台服务器。我想添加一个单独的状态id，用于管理通过表单更新的data标识符，以便表单数据在表单按钮单击时更改。

我相信我在使用mapStateToProps功能时遇到问题，并希望进行健全性检查。我说相信，因为其他一切在应用程序中看起来都是正确的，而且更多的是消除过程而不是彻底的冒烟，我认为这是mapStateToProps问题。

原始mapStateToProps编写如下，以管理data。

的表格

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

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

我建议为id添加data的更改如下：

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;
  }
}

id.js

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>
  )
}

Form.jsx

/* @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>
  )
}

React-Redux mapStateToProps单个容器中多个状态的用法

减速

部件

0 个答案: