#react-native [0.42] - Redux 的新导航 - 无法将状态映射到道具答案

【问题标题】：#react-native [0.42] - New Navigation with Redux - Cannot map state to props#react-native [0.42] - Redux 的新导航 - 无法将状态映射到道具
【发布时间】：2017-08-31 11:56:24
【问题描述】：

RN：0.42

我尝试使用新的导航（已发布）+ redux，但无法在通过 store 的屏幕中将 redux 的初始状态映射到道具。
我关注了这个：https://reactnavigation.org/docs/guides/redux
我已经编写了我的自定义减速器。

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>
    );
  }
}

在 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)

注意，dispatch 函数可以触发，但“state”没有附加减速器“initialState”。

请告诉我在新的 RN 导航中将 reducer initialState 附加到各种屏幕的正确方法。

【问题讨论】：

标签： react-native react-redux react-native-navigation

【解决方案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

【讨论】：