无法从 react-redux 中的操作加载 json 数据答案

【问题标题】：cant load json data from action in react-redux无法从 react-redux 中的操作加载 json 数据
【发布时间】：2017-01-10 14:35:58
【问题描述】：

我试图在我的简单网络应用程序中加载一些 json 数据。我会告诉你步骤。首先我的行动是：

const jsonData =
  [
    {
      "id": "00260001010000000001",
      "accountNumber": "0026.0001.01.0000000001",
      "description": "My account #1",
      "balance": 42.0,
      "balanceAvailable": 42.0,
      "currency": "EUR"
    },
    {
      "id": "00260001010000000002",
      "accountNumber": "0026.0001.01.0000000002",
      "description": "My account #2",
      "balance": 43.0,
      "balanceAvailable": 43.0,
      "currency": "EUR"
    }
  ];

export function inAccountList(jsonData) {
  return {
    type: 'ACCOUNT_LIST',
    payload: jsonData
  };
}

然后，我像这样创建我的减速器帐户列表减速器：

import { Map } from 'immutable';

function mergeState(state, newState) {
  return state.merge(newState);
}

    export default function (state = Map(), action) {
      switch (action.type) {
        case 'ACCOUNT_LIST':
          return mergeState(state, action.payload);
        default:
          return state;
      }
    }

和

import { combineReducers } from 'redux-immutable';
import AccountListReducer from './account_list_reducer';

const rootReducer = combineReducers({
  accounts: AccountListReducer,
});

export default rootReducer;

然后，我像这样创建我的 accountListContainer：

import { connect } from 'react-redux';
import AccountList from '../../components/AccountList';


function mapStateToProps(state) {
  // FIXME account number and available balance mapping.
  return { accounts: state.get('accounts').map(account => account.toJS()) };
}

const AccountListContainer = connect(mapStateToProps)(AccountList);

export default AccountListContainer;

我的 AccountList 视图是：

import React, { PropTypes } from 'react';
import { Table } from 'reactstrap';
import AccountEntry from '../AccountEntry';

const AccountList = ({ accounts }) => (
  <div className="account-list">
    <h4 className="table-header">Accounts</h4>
    <Table hover>
      <thead>
        <tr>
          <th>#</th>
          <th>Account Number</th>
          <th>Description</th>
          <th>Balance</th>
          <th>Available Balance</th>
          <th>Currency</th>
        </tr>
      </thead>
      <tbody>
        {accounts.map((account, i) =>
          <AccountEntry
            key={account.id} idx={i + 1}
            {...account}
          />
      )}
      </tbody>
    </Table>
  </div>
);


export default AccountList;

但它不起作用。它没有显示在 jsonData 中写入的虚拟数据。你知道发生了什么吗？

非常感谢

【问题讨论】：

你的 store 的 state 不是 ImmutableJS 对象，而你的 reducer 是其中的 ImmutableJS 对象。在 mapStateToProps 函数中尝试 state.accounts.toJS()
感谢 Mitchell 先生的快速回复，但这不起作用。它向我显示了一个错误捕获 TypeError: Cannot read property 'toJS' of undefined
尝试在 mapStateToProps 中添加一些断点，看看你的商店里有什么。一旦 ACCOUNT_LIST 被调度，您应该在初始状态上有一个空映射，然后是某种不可变对象。您收到的错误表明 state.accounts 在被调用时不存在
再次感谢您的快速响应....但是为什么 state.accounts 不存在？您在我的代码中看到错误了吗？
您是否使用将应用与商店打包在一起？

标签： reactjs redux action

【解决方案1】：

我认为号召性用语创建者inAccountList 缺席

在mapDispatchToProps 中传递动作创建者inAccountList
调用AccountList组件的componentDidMount中的动作

【讨论】：