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

Question

RN: 0.42

我尝试使用新的导航（已发布）+ redux，但我无法在经过商店的屏幕中将 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中我结合了我自己的自定义reducer

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)

请注意，调度功能可用于触发，但 'state' 没有附加减速器 'initialState'。

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

Answer 1

我知道你哪里做错了，在你的 index.ios.js 中将 import * from 'appReducer'; 更改为 import {reducer} from 'appReducer'; 那么你当前的组合 reducer 函数将像

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

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

#react-native [0.42] - New Navigation with Redux - Cannot map state to props

react-native

react-redux

react-native-navigation