react-native - 将原生 redux 映射状态 react 到 props 不起作用

Question

我是 react-native 的新手，我正在尝试使用 react-redux 实现一个简单的注册功能。由于某些原因，将状态映射到连接中的 Prop 不起作用。

下面是我的代码:

SignUp.js ( 零件 )

import React from 'react';
import { View, Text , TouchableOpacity , TextInput } from 'react-native'; 
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as signUpActions from "../actions/SignUpActions";

class SignUp extends React.Component {

  constructor(){
    super();
    this.state = {   
      name : '',
      password : '',
    };
  }

  saveUser(){
      let user = {};
      user.name = this.state.name;
      user.password = this.state.password;
      this.props.registerUser(user);
  }

  static navigationOptions = {
    title : 'Sign Up',
  };

  render(){
    return (
      <View>
        <TextInput 
          placeholder="Username" 
          onChangeText={(text) => this.setState({name : text})}
          />
         <TextInput 
            placeholder="Password" 
            onChangeText={(text) => this.setState({password : text})}
         />
         <TouchableOpacity onPress = {() => this.saveUser()} >
           <Text>DONE</Text>
         </TouchableOpacity>
      </View>                 
    ); 
  }
}    

export default connect(
  state => ({
      user : state.user
  }),
  dispatch => bindActionCreators(signUpActions, dispatch)
)(SignUp);

SignUpAction.js

function storeUser(user) {
    return {
        type : 'REGISTER_USER',
        payload : user,
    };
};

export function registerUser(user) {
    return function (dispatch, getState) {
        fetch(<the-url>)
            .then((response) => {return response.json()})
            .then((responseData) => dispatch(storeUser(responseData)))
            .catch((err) => console.log(err));
    };
};

SignUpReducer.js

const initialState = {
    data : {},
};

export default function signUpReducer(state = initialState, action) {

    console.log(action.payload) 
    //This gives {id:26 , name : "xyz" ,password:"pass"}

    switch (action.type) {
        case 'REGISTER_USER' :
            return {
                ...state , 
                user : action.payload
            }    
        default :         
            return state;
    }        
}

这是我的根 reducer

export default function getRootReducer(navReducer) {
    return combineReducers({
        nav: navReducer,
        signUpReducer : signUpReducer,
    });
}

正在调用注册用户函数。和 获取请求也通过网络成功执行。它返回相同的用户对象 将其存储在数据库中之后。它也分派(dispatch)给 storeUser 函数。 reducer 也被调用。

但是，由于某些原因，状态没有映射到 connect 里面的 props。 this.props.user 返回未定义。

我一定做错了什么，但我无法弄清楚。根据我到目前为止所看到的，当我们使用 bindActionCreators 调度任何操作时，reducer 的结果需要使用 connect 映射到组件的 props。如有错误请指正。

请帮我解决这个问题。

Answer 1

根据您的商店定义，

return combineReducers({
        nav: navReducer,
        signUpReducer : signUpReducer,
    });

您定义了 key signUpReducer为您的 SignUp组件状态。
为了访问这个组件的状态，你应该使用这个键后跟状态名称。

访问 user的正确方法是 :

 export default connect(
      state => ({
          user : state.signUpReducer.user 
      })

//使用 signUpReducer key