Question

我正在学习React-native并尝试实现redux。我已经使用 React-redux 和 React-thunk 从Action中执行了 Async任务。在实施期间，出现错误e.i.我运行时“中间件不在功能中” 。如果我注释掉中间件和相关代码，那么一切都会很好。

这是我的下面的代码。

index.js

import Data.List
import Data.Function

-- This function split the list in two (Longest Rally, Rest of the list)
splitSort' :: Ord a => [a] -> ([a], [a])
splitSort'        []  = ([], [])
splitSort'     (x:[]) = ([x],[])
splitSort' l@(x:y:xs) = case span ( (o ==) . snd) $ zip (y:xs) relativeOrder of
                            (f, s) -> (x:map fst f, map fst s)
  where relativeOrder = zipWith compare (y:xs) l
        o = compare y x

-- This applies the previous recursively
splitSort :: Ord a => [a] -> [[a]]
splitSort        []  = []
splitSort     (x:[]) = [[x]]
splitSort   (x:y:[]) = [[x,y]]
splitSort l@(x:y:xs) = fst sl:splitSort (snd sl)
  where sl = splitSort' l

ResetUserContainer.js 类。

import React, {Component} from 'react';
import ResetUserContainer from "./src/Components/resetUserContainer"
import {Provider} from 'react-redux'
import {createStore,applyMiddleware} from 'redux'
import {thunk} from 'redux-thunk'

import userResetReducer from "./src/Reducers/ResetReducer"

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

const store = createStoreWithMiddleware(userResetReducer);


export default class App extends Component {
  render() {
    return (
    <Provider store = {store}>
    <ResetUserContainer/>
    </Provider>
    );
  }
}

types.js

import React, { Component } from "react";
import { StyleSheet, View, ActivityIndicator } from "react-native";
import { connect } from "react-redux"
import userAction from "./Actions/UserAction"
import PropTypes from "prop-types";

class ResetUserContainer extends Components {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.requestToken();
    }

    render() {

        return (
            <View style={styles.container}>
                    <View style={styles.subContainer}>

                            onPress={this._onPressButton}
                            containerStyle={{ marginTop: 20 }}
                        />
                    </View>
                </View>

                <ActivityIndicator
                    size="large"
                    color="red"
                    style={this.props.isFetching ? styles.centering : styles.hideLoader} />
            </View>
        );
    }

    _onPressButton = () => {
      //  this.props.requestToken();
    }
}

ResetUserContainer.propTypes = {
    requestToken: PropTypes.func.isRequired,
    objectMember: PropTypes.object.isRequired
}


const mapStateToProps = state => {
    return {
        //Here using objectMember, we can access any member of action class
        objectMember: state,


//we can use also like this
        isFetching: state.isFetching,
        errorMsg: state.errorMsg,
        displayMsg: state.displayMsg,
        token: state.token
    }

}
export default connect(mapStateToProps, { userAction })(ResetUserContainer);

UserAction.js

  export const TOKEN_REQUEST_PROCESSED = 'TOKEN_REQUEST_PROCESSED';
  export const TOKEN_REQUEST_TOKEN_SUCCEEDED= 'TOKEN_REQUEST_TOKEN_SUCCEEDED';
  export const TOKEN_REQUEST_FAILED = 'TOKEN_REQUEST_FAILED';

ResetReducer.js

import AuthInterface from '../../Interfaces/authInterface';
import UserResetModel from '../../Models/userResetModel';
import SpecialUserModel from '../../Models/specialUserModel';

import { TOKEN_REQUEST_PROCESSED, TOKEN_REQUEST_TOKEN_SUCCEEDED, TOKEN_REQUEST_FAILED } from './types';

export const tokenRequestProcess = () => ({ type: TOKEN_REQUEST_PROCESSED });
export const tokenRequestSuccess = (token) => ({ type: TOKEN_REQUEST_TOKEN_SUCCEEDED, payload: token });
export const tokenRequestFailed = (error) => ({ type: TOKEN_REQUEST_FAILED, payload: error });

    export const requestToken = () => {
        return async dispatch => {
            dispatch(tokenRequestProcess);
            let specialuser = new SpecialUserModel("", "");
            specialuser.Username = "xyz.com";
            specialuser.Password = "xyz.password";

            AuthInterface.authenticateSpecialUser(specialuser).then((response) => {
                let result = new httpResponseModel();
                result = response;
                if (result.ErrorCode == "OK") {
                    dispatch(tokenRequestSuccess(result.token_number))
                } else {
                    //Handel all possible failure by error msg
                    dispatch(tokenRequestFailed(result.error_msg));
                }
            }, (err) => {

                dispatch(tokenRequestFailed(JSON.stringify(err)));
            });
        }
    };

package.json

import {
    TOKEN_REQUEST_PROCESSED, TOKEN_REQUEST_TOKEN_SUCCEEDED, TOKEN_REQUEST_FAILED
} from './types';

const initialState = {
    isFetching: false,
    errorMsg: '',
    displayMsg: '',
    token: ''
};

const resetReducer = (state = initialState, action) => {
    switch (action.type) {
        case TOKEN_REQUEST_PROCESSED:
            return { ...state, isFetching: true };

        case TOKEN_REQUEST_TOKEN_SUCCEEDED:
            return { ...state, isFetching: false, displayMsg: action.payload }

        case TOKEN_REQUEST_FAILED:
            return { ...state, isFetching: false, errorMsg: action.payload }

        default:
            return state;
    }
}


export default resetReducer;

如果我做错了什么或错过了什么，请告诉我。我已经用谷歌搜索，但无法解决，就像这里 Redux thunk in react native

谢谢。

Answer 1

import {thunk} from 'redux-thunk'

请检查此行。您应该将其更改为以下内容。

import thunk from 'redux-thunk'

middlware不是本机反应的功能

1 个答案: