＃反應母語[0.42] - 新的導航與終極版 - 不能映射狀態道具

Question

RN：0.42

1. 我試圖用新的導航（已發佈）+終極版，我無法映射在商店通過的屏幕上，還原到道具的初始狀態。
2. 我跟着這個：https://reactnavigation.org/docs/guides/redux
3. 我寫了我的自定義減速器。

export const types = { 
 
    ... 
 
} 
 

 
export const actionCreators = { 
 
    authenticate:() => async (dispatch, getState) => { 
 
    ... 
 
    } 
 
} 
 

 
const initialState = { 
 
    auth: { 
 
    ... 
 
    } 
 
} 
 

 
export const reducer = (state = initialState, action) => { 
 
    const {auth} = state 
 
    const {type, payload, error} = action 
 

 
    switch (type) { 
 
    ... 
 
    } 
 

 
    return state 
 
}

在index.ios.js我已經聯合自己的自定義減速器

import { addNavigationHelpers } from 'react-navigation'; 
 
import * from 'appReducer'; 
 

 
const AppNavigator = StackNavigator({ 
 
    Home: { screen: MyTabNavigator }, 
 
}); 
 

 
const navReducer = (state, action) => { 
 
    const newState = AppNavigator.router.getStateForAction(action, state); 
 
    return (newState ? newState : state) 
 
}; 
 

 
const appReducer = combineReducers({ 
 
    nav: navReducer, 
 
    app: appReducer 
 
}); 
 

 
@connect(state => ({ 
 
    nav: state.nav, 
 
})) 
 
class AppWithNavigationState extends React.Component { 
 
    render() { 
 
    return (
 
     <AppNavigator navigation={addNavigationHelpers({ 
 
     dispatch: this.props.dispatch, 
 
     state: this.props.nav, 
 
     })} /> 
 
    ); 
 
    } 
 
} 
 

 
const store = createStore(appReducer); 
 

 
class App extends React.Component { 
 
    render() { 
 
    return (
 
     <Provider store={store}> 
 
     <AppWithNavigationState /> 
 
     </Provider> 
 
    ); 
 
    } 
 
}

1. Inside Home.js，'mapStateToProps'不起作用。

import React, { Component } from 'react' 
 
import { View, Text, StyleSheet } from 'react-native' 
 
import { connect } from 'react-redux' 
 

 
import { actionCreators } from './appRedux' 
 

 
const mapStateToProps = (state) => ({ 
 
    //This is the problem: Here 'state' has no 'auth' object attached to it 
 
    auth: state.auth 
 
}) 
 

 
class Home extends Component { 
 

 
    componentWillMount() { 
 
    const {dispatch} = this.props 
 
    //Dispatch works 
 
    dispatch(actionCreators.authenticate('testId', 'testToken')) 
 
    } 
 

 
    
 
    render() { 
 
    const {auth} = this.props 
 

 
    return (
 
     <View style={styles.container}> 
 
      <Text> 
 
      Welcome {auth['name']} 
 
      </Text> 
 
     </View> 
 
    ) 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    container: { 
 
    flex: 1, 
 
    } 
 
}) 
 

 
export default connect(mapStateToProps)(Home)

注意，調度功能可用火但 '狀態' 不具有減速器 '的初始化狀態' 連接到它。

請讓我知道在新的RN導航中將reducer initialState附加到各種屏幕的正確方法。

Answer 1

我知道了，你做錯了，你index.ios.js改變import * from 'appReducer';到import {reducer} from 'appReducer';那麼當前的合併減速功能會像

const appReducer = combineReducers({ 
    nav: navReducer, 
    app: reducer 
}); 

然後在home.js你mapStateToProps應像

const mapStateToProps = (state) => ({ 
    //This is the problem: Here 'state' has no 'auth' object attached to it 
    authState: state.app //remember store only contains reducers as state that you had passed in combineReducer function 
}) 

現在用它在你的組件一樣

this.props.authState.auth  //remember you had wrapped your auth object within initialState object