将原生 redux 映射状态反应为道具不起作用

Question

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

下面是我的代码：

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

注册操作.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));
    };
};

注册Reducer.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;
    }        
}

这是我的根减速器

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

正在调用注册用户函数。并且fetch 请求也在网络上成功执行。将相同的用户对象存储在数据库中后，它会返回相同的用户对象。它也分派给 storeUser 函数。减速器也被调用。

但是，由于某些原因，状态没有映射到连接内的道具。this.props.user 返回未定义。

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

请帮我解决这个问题。

Answer 1

根据您的商店定义，

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

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

正确的访问方式user是：

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

//使用signUpReducer密钥