无法从 React-redux 中的操作加载 JSON 数据

Question

im 尝试在我的简单 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
  };
}

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

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;

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

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;

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

多谢

Answer 1

我认为没有

号召性用语创作者inAccountList

1. 在mapDispatchToProps中传递动作创建者inAccountList
2. 调用组件中的操作AccountList组件的 DidMount