Reactjs 无法从react redux中的操作加载json数据

我正在尝试在我的简单web应用程序中加载一些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
  };
}

然后，我创建我的reducer帐户列表reducer，如下所示：

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

及

然后，我创建accountListContainer，如下所示：

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

我的帐户列表视图是：

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;

import React，{PropTypes}来自'React'；
从“reactstrap”导入{Table}；
从“../AccountEntry”导入AccountEntry；
const AccountList=（{accounts}）=>(
账户
#
帐号
描述
平衡
可用余额
通货
{accounts.map（（account，i）=>
)}
);
导出默认帐户列表；

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

---

非常感谢

我认为CountList中的action creator

调用不存在

在
mapDispatchToProps
调用
AccountList
component的componentDidMount中的操作
存储的状态不是ImmutableJS对象，而是存储中的还原程序是ImmutableJS对象。在MapStateTrops函数中尝试state.accounts.toJS（）。谢谢您的快速响应，Mitchell先生，但这不起作用。它向我显示了一个由TypeError捕获的错误：无法读取未定义的属性“toJS”，在mapStateToProps中粘贴一些断点，并查看存储中的内容。您应该在初始状态上有一个空映射，然后在调度ACCOUNT_列表后有某种不可变的对象。您收到的错误表明state.accounts在调用时不存在再次感谢您的快速响应…但是为什么state.accounts不存在？你在我的代码中看到错误了吗？你是否使用商店包装了你的应用程序？