将原生 redux 映射状态反应为道具不起作用 [英] React native redux map state to props not working

问题描述

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

I am new to react-native and I am trying to implement a simple sign up functionality using react-redux. For some reasons , mapping the state to props in connect is not working.

下面是我的代码:

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

这是我的根减速器

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

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

The register user function is being called. And the fetch request is also successfully executed over a network. It returns the same user object back after storing it in a database. It dispatches to the storeUser function as well. The reducer is getting called as well.

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

But , for some reasons , the state is not mapped to the props inside the connect. this.props.user returns undefined.

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

I must be doing something wrong in this but I am not able to figure it out. Based on what I have seen till now when we dispatch any action using bindActionCreators the result from reducer needs to be mapped to component's props using connect. Please correct me if wrong.

请帮我解决这个问题.

推荐答案

根据您的商店定义，

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

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

You defined the key signUpReducer for your SignUp component state. In order to access the state of this component,you should use this key followed by the state name.

访问user的正确方法是:

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

//使用signUpReducer键

这篇关于将原生 redux 映射状态反应为道具不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！