Question

我正在使用React，Redux，react-redux，react-router，react-router-redux和redux-async-connect编写应用程序。该应用程序的特殊部分是所有客户端 - 服务器通信都通过websockets完成。

我的用户可以读/写几个墙，我存储的是walls商店，其中包含以下减速器和基本辅助功能：

const LOAD = 'ws/wall/LOAD';
const LOAD_SUCCESS = 'estisia/wall/LOAD_SUCCESS';
const LOAD_FAIL = 'estisia/wall/LOAD_FAIL';
const ADD_MESSAGE = 'estisia/wall/ADD_MESSAGE';

const initialWallState = {
  loaded: false,
  messages: []
};

const initialState = {
  walls: {}
};

function wall(state = initialWallState, action = {}) {
  switch (action.type) {
    ... // omitted for brevity
    default:
      return state;
  }
}

export default function walls(state = initialState, action = {}) {
  if (typeof action.data === 'undefined' || typeof action.data.wallId === 'undefined') return state;

  const newState = {
    ...state.walls,
    [action.data.wallId]: wall(state.walls[action.data.wallId], action)
  };
  return {walls: newState};
}

export function isLoaded(wallId, globalState) {
  return globalState.walls.wallId && globalState.walls.wallId.loaded;
}

export function load(wallId) {
  return {
    type: LOAD,
    send: ['wall/messages/page', [wallId, 1]]
  };
}

我有一个Wall容器，其中相应的wallId由react-router传入，但无法弄清楚如何使@connect调用只通过相关的墙数据到容器。我应该怎么做而不是下面的@connect元代码才能让它工作？

@asyncConnect([{
  deferred: true,
  promise: ({store: {dispatch, getState}, params}) => {
    if (!isLoaded(params.wallId, getState())) {
      return dispatch(loadWall(params.wallId));
    }
  }
}])
@connect(
  state => ({
    messages: state.wall[this.params.wallId].messages,
    loading: state.wall[this.params.wallId].loading
  }))
export default class Wall extends Component {
  static propTypes = {
    messages: PropTypes.array
  }
... // omitted for brevity 
}

如何帮助我解决上述情况{/ 1}}

如何@connect到异步加载的数据？

0 个答案: