Question

在我的React-Native应用程序中，我有一些运行良好的数据库代码。但是，我认为我需要在redux中穿梭才能维持某些状态，尤其是应用设置。

一旦我通过厚厚的头骨得到了redux概念并实现了它，同一数据库代码就开始返回promise，而不是遵守以前使用的“ await”语句。

以下是相关的reducer和数据库代码：

// relevant imports
export default function divisionReducer(state = {programId: 1}, action) {

    switch (action.type) {
        case GET_DIVISIONS_BY_PROGRAM:

            // add result to state
            return _.cloneDeep({...state, divisions: divisions });

        default:
            return state;
    }

}

getAllDivisions = async (programId) => {

        let db = await openDefault();

        const sql = "SELECT * FROM DIVISION WHERE DIVISION_PROGRAM_ID = ?";

        let sqlResult = await query(db, sql, [programId]);

        await close(db);

        // function to convert db snake case to camelcase
        result = keysToCamelCase(sqlResult.result);

        return result;

}

我的问题：为什么此代码不遵守“ await”关键字？

编辑：根据要求添加了更多代码

以下是该部门的操作代码：

import { GET_DIVISIONS_BY_PROGRAM } from "./actionTypes";

export const getAllDivisions = (programId) => {

    return {
        type: GET_DIVISIONS_BY_PROGRAM,
        payload: programId
    }
}

下面是DivisionManagementScreen，它调用getAllDivisions代码：

port React, {Component} from "react";
import {View, FlatList, Alert} from "react-native";
import {withNavigation} from "react-navigation";
import {connect} from "react-redux";

import masterStyles, {listPage, bigButtonStyles} from "./../../styles/master";

import {getAllDivisions} from "./../../redux/actions/divisionActions";

import DivisionManagementRow from "./DivisionManagementRow";

class DivisionManagmementScreen extends Component {

    constructor(props) {
        super(props);

    }

    async componentDidMount() {

        this.props.getAllDivisions(this.props.programId);
        console.log("Props after getAllDivisions: " + JSON.stringify(this.props));
    }

    async componentWillUnmount() {

        console.log("Entered componentWillUnount()");

    }

    _renderItem = ({item}) => (
        <DivisionManagementRow divisionId={item.DIVISION_ID} divisionName={item.DIVISION_NAME}
            onAddTeam={() => {this._addTeam(item.DIVISION_ID)}}
            onEdit={() => {this._editDivision(item.DIVISION_ID)}}
            onDelete={() => {this._btnDeleteDivision(item.DIVISION_ID)}}/>        

    );


    render() {
        console.log("In render(), props: " + JSON.stringify(this.props));
        return (
            <View style={masterStyles.component}>
                <View style={listPage.listArea}>
                    <FlatList 
                        data={this.props.divisions}
                        renderItem={this._renderItem}
                        keyExtractor={(item) => item.DIVISION_ID.toString() } />
                </View>        
                <View style={listPage.bottomButtonArea}>
                    <PortableButton defaultLabel="Add Division"
                        disabled={false}
                        onPress={() => {this._addDivision()}}
                        onLongPress={() => {}}
                        style={bigButtonStyles} />
                </View>
            </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        programId: state.divisionReducer.programId,
        divisions: state.divisionReducer.divisions
    };
}

export default withNavigation(connect(mapStateToProps, {getAllDivisions})(DivisionManagmementScreen));

这足以诊断代码吗？

Answer 1

我看不到您实际上在哪里调用getAllDivisions异步函数。我只能看到您尝试调用getAllDivisions动作创建者-动作创建者只是同步发出动作，默认情况下，他们不能调用具有副作用的函数。

如果要触发副作用，例如数据库异步函数，则需要查看redux-thunk之类的库。或更高级的将是redux-saga。如果您是新手，建议您从redux-thunk开始。

我还认为您使用connect()函数的方式是错误的。第二个参数mapDispatchToProps实际上需要调度您的操作到商店。所以它应该像这样：

function mapStateToProps(state) {
    return {
        programId: state.divisionReducer.programId,
        divisions: state.divisionReducer.divisions
    };
}

function mapDispatchToProps(dispatch) {
    return {
        getAllDivisions () {
          dispatch(getAllDivisions())
        }
    };
}

export default withNavigation(
  connect(
    mapStateToProps, mapDispatchToProps
  )(DivisionManagmementScreen)
)

Answer 2

因此，与其正确地编写启用了数据库的操作创建者（以“ return（dispatch）=> {/ *等等等等* /}开始），我仍然是让它返回一个对象，并进行化简调用具有数据库代码的方法。

我终于通过厚厚的头骨得到了这些概念，并使代码在一个周末内都能正常工作。

为什么我的Redux Reducer忽略等待异步功能？

2 个答案: