Question

我已经开始使用redux in react-native而我遇到了问题，当我在dispatching for onLoadStart函数中对Image组件执行操作时，回调正在触发，我看到该操作被调用并且我在屏幕上看到了Loading...，但当我dispatching onLoadEnd时，(callback loadEnd is not fired, app looks like frozen)没有任何事情发生class DisplayImage extends Component { loadStart() { this.props.iLoadingFunction(true); } loadEnd() { // <- this function is not fired this.props.iLoadingFunction(false); } render() { if (this.props.isLoading) { return <Text>Loading…</Text>; } return ( <View> <Image source={{uri: 'https://test.com/image'}} onLoadStart={this.loadStart.bind(this)} onLoadEnd={this.loadEnd.bind(this)} /> </View> ); } } const mapStateToProps = (state) => { return { isLoading: state.isLoading }; }; const mapDispatchToProps = (dispatch) => { return bindActionCreators({ iLoadingFunction }, dispatch); }; export default connect(mapStateToProps, mapDispatchToProps)(DisplayImage);。当我在两个地方使用console.log代码工作正常。有人能告诉我我做错了什么吗？

export function iLoadingFunction(bool) {
    return {
        type: 'IS_LOADING',
        isLoading: bool
    };
}

export function iLoadingFunction(state = false, action) {
    switch (action.type) {
        case 'IS_LOADING':
            return action.isLoading;
        default:
            return state;
    }
}

动作和减速器

add_index :table_name, [:some_id, :another_id], unique: true, algorithm: :concurrently

Answer 1

我认为问题来自行动和呈现的顺序。让我们看一下render函数：

render() {
    if (this.props.isLoading) {
        return <Text>Loading…</Text>;
    }
    return (
      <View>
          <Image
            source={{uri: 'https://test.com/image'}}
            onLoadStart={this.loadStart.bind(this)}
            onLoadEnd={this.loadEnd.bind(this)}
           />
      </View>
    );
}

第一次安装this.props.isLoading的组件为false，因此组件呈现

<View>
    <Image
      source={{uri: 'https://test.com/image'}}
      onLoadStart={this.loadStart.bind(this)}
      onLoadEnd={this.loadEnd.bind(this)}
     />
</View>

Image次坐标，开始加载图片并发送this.props.iLoadingFunction(true)。

此时，商店中的isLoading次更新会触发重新呈现组件。此时this.props.isLoading为真，因此组件呈现

<Text>Loading…</Text>

现在已从层次结构中删除原始Image。我确实不确定它是否继续下载图像，但onLoadEnd处理程序不会触发，因为已经删除了期望处理它的组件。

要解决此问题，我会将Image保留在层次结构中，只需根据Text包含或排除this.props.isLoading，就像这样

render() {
    return (
      <View>
          { this.props.isLoading && <Text>Loading…</Text> }
          <Image
            source={{uri: 'https://test.com/image'}}
            onLoadStart={this.loadStart.bind(this)}
            onLoadEnd={this.loadEnd.bind(this)}
           />
      </View>
    );
}

Answer 2

使用可回调操作标准化操作的最佳解决方案。我建议使用 redux-cool 包来做到这一点

npm install redux-cool

import {actionsCreator} from "redux-cool"
const callback = () => {
    console.log("Hello, I am callback!!!")
}
const callbackable_action = actionsCreator.CALLBACKABLE.EXAMPLE(1, 2, 3, callback)
console.log(callbackable_action)
//      {
//          type: "CALLBACKABLE/EXAMPLE",
//          args: [1, 2, 3],
//          cb: [[Function callback]],
//          _index: 1
//      }
callbackable_action.cb()
//      "Hello, I am callback!!!"

有关详细信息，请参阅：Redux Cool

在回调中调度redux动作

2 个答案: