如何在 React Native 中使用 redux 在 props 中定义变量/方法
2019-01-27
699
我正在实现身份验证,我的 props 有问题。
当我显示 props 时,我没有 props
authState
,所以
我收到一个错误,我不明白它来自哪里,也无法解决。错误如下:
[21:42:10] TypeError: undefined is not an object (evaluating '_this$props$authState.app_started')
This error is located at:
in App (at withExpoRoot.js:22)
in RootErrorBoundary (at withExpoRoot.js:21)
in ExpoRootComponent (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)
App.js
import ...
export default class App extends React.Component {
componentDidMount() {
this.props.checkLogin();
}
_renderSplash = ()=>{
return (
<View>
<ActivityIndicator size="large"/>
<Text children='Loading...'/>
</View>
);
}
_renderRoot = (authenticated)=>{
const Navigation = Navigation(authenticated);
return <Navigation/>;
}
render() {
console.log(this.props); // it don't show -> this.props.authState
const {app_started, authenticated} = this.props.authState;
const Root = connect(mapStateToProps, mapDispatchToProps) ((app_started ? this._renderRoot(authenticated): this._renderSplash));
return (
<Provider store={configureStore}>
<Root/>
</Provider>
);
}
}
const mapStateToProps = (state) => {
return {
authState: state.authState
}
};
const mapDispatchToProps = (dispatch, ownProps)=>{
return {
async checkLogin(){
const isLoggin = await AsyncStorage.getItem('authenticated').catch(e => console.log(e));
if(isLoggin){
dispatch(actionCreator(LOGIN_SUCCESS))
}
dispatch(actionCreator(APP_LOADED))
}
}
};
configureStore.js
import {combineReducers, createStore} from 'redux';
import authStateReducer from './authStateReducer';
const rootReducer = combineReducers({
authState: authStateReducer
});
const configureStore = () => {
return createStore(rootReducer);
};
export default createStore(configureStore);
navigation.js
import ...
const Navigation = (authenticated)=>createStackNavigator({
login: {
screen: Login,
navigationOptions: {
title: 'login'
}
},
dashboard: {
screen: Dashboard,
navigationOptions: {
title: 'dashboard'
}
}
}, {
initialRouteName: authenticated ? 'dashboard': 'login'
});
export default Navigation;
authStateReducer.js
import ...
const authStateReducer = (state={app_started: false, authenticated: false} , action)=>{
let next_state;
switch (action.type) {
case LOGIN_SUCCESS:
next_state = {
...state, authenticated: true
};
return next_state;
case LOGOUT:
next_state = {
...state, authenticated: false
};
return next_state;
case APP_LOADED:
next_state = {
...state, app_started: true
};
return next_state;
default:
return state;
}
}
export default authStateReducer;
Login.js
import ...
class Login extends React.PureComponent{
_login = ()=>{
// check the fields
let token = 'whatever';
this.props.authSuccess(token);
};
render() {
return (
<View>
<TextInput.../>
<TextInput...
onSubmitEditing={this._login}
/>
<Button ... onPress={this._login}/>
</View>
);
}
}
const mapStateToProps = (state) => {
return state
};
export const actionCreator = (action, payload=null)=>{return{type: action, payload: payload}};
const mapDispatchToProps = (dispatch,ownProps)=>{
return {
authSuccess: (token)=>{
AsyncStorage.multiSet([['token',token], ["login", '1']]);
dispatch(actionCreator(LOGIN_SUCCESS))
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);
I found the error, it's in
configureStore.js
2个回答
轻量级的 React-Native Redux Boilerplate,具有现成的现代技术。此 Repo 为您的下一个 React-Native 项目提供了良好的开端。 请查看链接
Israt Jahan Simu
2019-01-30
在 App.js 中,
authState
未定义,因为您需要
connect
您的
mapStateToProps
和
mapDispatchToProps
,否则它们都无法在 this.props 中使用。
它应如下所示:
App.js
import...
import { connect } from 'react-redux';
class App extends React.Component { // <- get rid of export default here
...
// after mapStateToProps and mapDispatchToProps
export default connect(mapStateToProps, mapDispatchToProps)(App);
D. Smith
2020-04-24