Redux動作未映射到反應道具

我正在製作我的第一個反應原生應用程序，我似乎無法將我的動作綁定到道具上。在組件this.props.actions中是空的，並且LoginActions也是mapDispatchToProps函數中的空對象。這導致我相信它在動作或連接綁定中存在問題。任何人都可以看到我要去哪裏嗎？Redux動作未映射到反應道具

組件：

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { 
    View, 
    StyleSheet, 
} from 'react-native'; 
import { 
    google, 
    facebook, 
    twitter, 
} from 'react-native-simple-auth'; 
import LoginConstants from '../../constants/Login.constants'; 
import * as LoginActions from '../../actions/Login.actions'; 
import LoginForm from '../../components/LoginForm'; 

class Login extends Component { 
    constructor(props) { 
    super(props); 
    alert(JSON.stringify(this.props.actions)) 
    this.loginActions = { 
     google, 
     facebook, 
     twitter, 
    }; 

    this.loginAction = this.loginAction.bind(this); 
    } 

    loginAction(platform) { 
    alert(JSON.stringify(this.props.actions)) 
    // this.loginActions[platform](LoginConstants[platform]) 
    // .then((info) => { 
    //  alert(info); 
    //  // info.user - user details from the provider 
    //  // info.credentials - tokens from the provider 
    // }).catch((error) => { 
    //  throw Error(`Error ${error.code}: ${error.description}`); 
    // }); 
    } 

    render() { 
    return (
     <LoginForm actions={this.loginActions} loginAction={this.loginAction} /> 
    ); 
    } 
} 

Login.propTypes = { 
    actions: PropTypes.object.isRequired, 
    user: PropTypes.object 
}; 

const styles = StyleSheet.create({ 
}); 

const mapStateToProps = (state) => { 
    return { 
    user: state.user 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    actions: bindActionCreators(LoginActions, dispatch) 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(Login);

操作：

import LoginConstants from '../constants/Login.constants'; 

export function getUser(userId) { 
    return { 
    type: LoginConstants.actions.getUser, 
    payload: new Promise((resolve, reject) => { 
     setTimeout(() => { 
     resolve({ 
      userId: '123ddgs', 
     }); 
     }, 2000); 
    }); 
    }; 
}; 

export function saveUser(user) { 
    return { 
    type: LoginConstants.actions.saveUser, 
    payload: new Promise((resolve, reject) => { 
     setTimeout(() => { 
     resolve({ 
      userId: '123ddgs', 
     }); 
     }, 2000); 
    }) 
    }; 
};

減速機：

import LoginConstants from '../constants/Login.constants'; 

const loginReducers = (state = { 
    user: {}, 
    prevStates: [] 
}, action) => { 
    switch (action.type) { 
    case LoginConstants.actions.getUser: 
     state = { 
     ...state, 
     user: action.payload, 
     prevStates: [...state.prevStates, action.payload] 
     }; 
     break; 

    case LoginConstants.actions.saveUser: 
     state = { 
     ...state, 
     user: action.payload, 
     prevStates: [...state.prevStates, action.payload] 
     }; 
     break; 
    } 

    return state; 
}; 

export default loginReducers;

商店：

import { 
    createStore, 
    combineReducers, 
    applyMiddleware, 
} from 'redux'; 
import thunk from 'redux-thunk'; 
import promise from 'redux-promise-middleware'; 
import { createLogger } from 'redux-logger'; 
import loginReducers from './src/reducers/Login.reducers'; 
import beerReducers from './src/reducers/Beer.reducers'; 

export default createStore(
    combineReducers({ 
    loginReducers, 
    beerReducers, 
    }), 
    {}, 
    applyMiddleware(createLogger(), thunk, promise()) 
);

來源

2017-10-11 gazzwi86

如果'LoginActions'是'mapDispatchToProps'中的一個空對象，也許你沒有正確地導出/導入這些函數。 – kngroo

@kngroo好吧，我已經附上了行動文件以及商店。我不明白它是如何不正確的出口，雖然我確實認爲我自己最初 – gazzwi86

這很奇怪。如果LoginActions是一個空對象，則表示這些函數未被導入。你確定這個路徑「../../ actions/Login.actions''是否正確？那裏有一個名爲'Login.actions'的目錄嗎？ – kngroo

JSON.stringify從其輸出中剝離函數，因此操作和分派器在警報輸出中不可見。

來源

2017-10-12 12:01:06 gazzwi86

Redux動作未映射到反應道具

回答

相關問題