[英]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.