React Native: Why isn't redux correctly updating the state?

问题

In Redux + iOS React Native, the updated state logs properly in the parent component, but when logged inside another method, it just logs the initialState.

I have the following components that call the actions:

  _handleFirstName(text) {
    this.props.actions.updateFirstName(text)
  }

  _handleLastName(text) {
    this.props.actions.updateLastName(text)
  }

  <TextInput
    placeholder='Enter First Name'
    onChangeText={this._handleFirstName.bind(this)}
    value={this.props.userInfo.firstName}
  />

  <TextInput
    placeholder='Enter Last Name'
    onChangeText={this._handleLastName.bind(this)}
    value={this.props.userInfo.lastName}
  />

And my actions are set up like so:

export function updateFirstName(text) {
  return {
    type: UPDATE_FIRST_NAME,
    firstName: text
  }
}

export function updateLastName(text) {
  return {
    type: UPDATE_LAST_NAME,
    lastName: text
  }
}

And for my reducers:

const initialState = {
    newUser: false,
    active: false,
}

function userReducer(state = initialState, action) {
  switch(action.type) {
    case UPDATE_FIRST_NAME:
      return {
        ...state,
        firstName: action.firstName
      }

    case UPDATE_LAST_NAME:
      return {
        ...state,
        lastName: action.lastName
      }

     default:
       return state
  }
}

export default userReducer

And the state correctly updates the properties and returns a userInfo state. But then when I console log the updated userInfo inside another method, rather retrieving the updated state, it just logs the userInfo initialState of:

const initialState = {
    newUser: false,
    active: false,
}

And the attempt to log it is done like so:

  _logUserInfo() {
    console.log(this.props.userInfo)
  }

<TouchableHighlight onPress={this._logUserInfo.bind(this)}>
  <Text>Log User Info</Text>
</TouchableHighlight>

Even though it correctly console logs the updated state in the parent component, why is it just logging the initialState instead of the updated state when called inside another method?

Thank you in advance!

EDIT

This is how state is connected to components, in NavigationRootContainer.js:

import { connect } from 'react-redux'
import NavigationRoot from '../Components/NavigationRoot'
import { updateFirstName, updateLastName, } from '../Actions/userActions'

function mapStateToProps(state) {
  return {
    userInfo: state.userReducer,
  }
}

export default connect(
  mapStateToProps,
  {
    updateFirstName: (value) => updateFirstName(value),
    updateLastName: (value) => updateLastName(value),
  }
)(NavigationRoot)

In index.ios.js:

import NavigationRootContainer from './src/Containers/NavigationRootContainer'


const userProject = () => (
  <Provider store={store}>
    <NavigationRootContainer/>
  </Provider>
)

And the props are passed down like so with root component NavigationRoot.js using <NavigationCardStack/>:

  _renderScene (props) {
    return (
      <route.component{...route.passProps} actions={this.props}/>
    )
  }

    <NavigationCardStack
      direction='horizontal'
      navigationState={this.props.navigation}
      onNavigate={this._handleNavigate.bind(this)}
      renderScene={this._renderScene}
      renderOverlay={this.renderOverlay}
      style={styles.container}
    />

来源：https://stackoverflow.com/questions/39235637/react-native-why-isnt-redux-correctly-updating-the-state

标签

javascript

reactjs

react-native

redux

react-jsx