Question

我有一个控制器组件“VideoManager”，它可以呈现视图组件“Video”。视图组件呈现本地视频流（如果有一个可通过道具获得），否则它会呈现一个按钮，通过getUserMedia初始化视频流（我已经在承诺中包含了getUserMedia API调用。查看控制台日志，我看到状态正确地初始化为空的不可变映射。但是，当我单击按钮时，在promise完成之前状态变为“未定义”，因此抛出错误'无法读取属性'未定义'的getIn'。可能这是因为在承诺完成之前状态发生了短暂的变化（虽然我不确定为什么它会变为未定义而不是保持在它的初始状态。）

这是我的控制器组件：

import React from 'react';
import {connect} from 'react-redux';
import Video from './Video';
import bowser from 'bowser';
import * as actionCreators from '../action_creators';

export const VideoManager = React.createClass({
  render: function() {
    return <div>
      <div>This is the VideoManager component.</div>
      <div>{bowser.chrome && bowser.version > 34 ? "Welcome!" : "Sorry, we only support Chrome version 34 and above"}</div>
      <Video {...this.props}/>
    </div>
  }
});

function mapStateToProps(state) {
  return{
    localStreamURL: state.getIn(['localStreamInfo', 'localStreamURL'])
  };
}

export const VideoManagerContainer = connect(mapStateToProps, actionCreators)(VideoManager);

这是我的视图组件：

import React from 'react';

export default React.createClass({

  render: function() {
    const videoAndAudio = {audio: false, video: true};
    return <div>
      <div>This is the Video component.</div>
      {this.props.localStreamURL ? <video id="localVideo" src={this.props.localStreamURL}></video> : <button onClick={() => this.props.getLocalVideo(videoAndAudio)}>Get Local Video</button>}
    </div>
  }
});

我的动作创作者：

export function getLocalVideo(config) {
  return {
    type: 'GET_LOCAL_VIDEO',
    config
  };
}

和我的减速机：

import {List, Map} from 'immutable';
import {createLocalStream} from './utils/webrtc_utils';

function getLocalVideo(state, config){
    createLocalStream(config).then(
    function(stream){    
        return state.set('localStreamInfo', Map({
            localStream: stream,
            localStreamURL: URL.createObjectURL(stream)
        }));
 }, function(err){
        console.log("Stream collection failed: ", err);
 });
}

export default function(state = Map(), action){
    switch(action.type) {
        case 'GET_LOCAL_VIDEO':
            return getLocalVideo(state, action.config);
    }
    return state;
}

我是否认为承诺是出轨的地方？如果是这样，我如何防止'connect'告诉控制器在履行承诺之前有新的状态？

修改
对于后代这里是我的承诺包裹getUserMedia：

export function createLocalStream(callConfig){
    return new Promise(function(resolve, reject){
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

        if (navigator.getUserMedia) {
           navigator.getUserMedia(callConfig,
              function(stream) {
                 resolve(stream);                
              },
              function(err) {
                 reject("The following error occured: " + err.name);
              }
           );
        } else {
           reject("getUserMedia not supported");
        }
    })
}

Answer 1

你这样做：

export default function(state = Map(), action){
    switch(action.type) {
        case 'GET_LOCAL_VIDEO':
            return getLocalVideo(state, action.config);
    }
    return state;
}

虽然getLocalVideo应该返回新状态，但它不是，这就是状态未定义的原因。您正在修改承诺中的状态，而您不应该这样做。相反，尝试在你的“getLocalVideo”中做异步内容。函数，为不同状态调用操作（GET_LOCAL_VIDEO，GET_LOCAL_VIDEO_SUCCESS，GET_LOCAL_VIDEO_FAIL）

这样的事情应该有用（不要忘记调整你的减速机）

export function getLocalVideo(config) {
  dispatch({type: 'GET_LOCAL_VIDEO', config});
  createLocalStream(config).then((stream)=>
      dispatch({
          type: 'GET_LOCAL_VIDEO_SUCCESS',
          localStreamInfo: Map({
              localStream: stream,
              localStreamURL: URL.createObjectURL(stream)
          })
      })
  }).catch((error)=>dispatch({type:'GET_LOCAL_VIDEO_FAIL', error}))

尽管初始化成功，但Redux存储未定义

1 个答案: