简体   繁体   English

当状态改变时,redux的带有连接助手的本机反应不会重新呈现吗?

[英]React native with connect helper from redux doesn't re-render when state change?

I used reactJS and i know that a component that is wrapped with connect helper that listens to specific reducer when its reducer's state changes it causes the component to re-render . 我使用reactJS并且我知道一个由connect助手包装的组件,当其reducer's state更改时,它会侦听特定的reducer ,从而导致该组件re-render

I don't know why same procedure doesn't work for react-native , i tested my action creators as well as reducers and checked hundred percent that they return new state , And when i checked componentWillRecieveProps i found that the new state is returned correctly and the component doesn't re-render. 我不知道为什么相同的程序不能对react-native起作用,我测试了action creators和化reducers并检查了它们返回新state ,并且当我检查componentWillRecieveProps我发现正确返回了新状态并且该组件不会重新渲染。


Reducer 减速器

const INITIAL = {
  isSigned: null
}

export default (state = INITIAL, action) => {
  switch(action.type){
    case SIGNED_IN : return {...state, isSigned: true};
    case LOGGED_OUT: return {...state, isSigned: false};
    default: return state;
  }
}

Component 零件

import React, { Component } from 'react';
import { ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../../actions';


class Loading extends Component {
  constructor(props){
    super(props);

  }

  componentDidMount(){

    this.props.checkSigned();

     switch(this.props.isSigned){
       case null  : return;
       case false : this.props.navigation.navigate('Auth');
       case true  : this.props.navigation.navigate('App')
     }
  }

  render(){
    return (
        <ActivityIndicator size="large" color="black" />
    )
  }
}

const mapStateToProps = ({signed}) => {
  const {isSigned} = signed;
  return {
    isSigned
  }
}

export default connect(mapStateToProps, actions)(Loading);

Actions 操作

export const SIGNED_IN = 'SIGNED_IN';
export const LOGGED_OUT = 'LOGGED_OUT';

//Action Creators

export const checkSigned = () => async dispatch => {
    let token = await AsyncStorage.getItem('fb_token');
     if(token){
       dispatch({type: SIGNED_IN})
     }
    dispatch({type: LOGGED_OUT})
  }

You need to use bindActionCreators to dispatch your actions as props 您需要使用bindActionCreators将您的操作作为道具进行分派

import { bindActionCreators } from 'redux';


const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
const mapStateToProps = state => {
  return {
    isSigned: state.isSigned
  }
}

export default connect(mapStateToProps, actions)(Loading);

// In actions, you need to fix action code //在操作中,您需要修复操作代码

export const checkSigned = () => async dispatch => {
let token = await AsyncStorage.getItem('fb_token');
 if(token){
   dispatch({type: SIGNED_IN});
 } else {
    dispatch({type: LOGGED_OUT});
 }
}

I think the problem is that you're running your state change logic in componentDidMount . 我认为问题在于您正在componentDidMount运行状态更改逻辑。 componentDidMount doesn't run when your component re-renders, but componentDidUpdate does. 重新渲染组件时, componentDidMount不会运行,但是componentDidUpdate会运行。 Put your logic there. 把你的逻辑放在那里。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM