javascript - 当状态改变时,使用来自 redux 的连接助手的 React Native 不会重新渲染?
问题描述
我用过reactJS
并且我知道一个用助手包装的组件会在它的更改时connect
监听特定的内容,它会导致组件。reducer
reducer's state
re-render
我不知道为什么相同的程序不起作用react-native
,我测试了我action creators
的以及reducers
检查了百分百他们返回新state
的,当我检查时componentWillRecieveProps
我发现新状态被正确返回并且组件没有重新使成为。
减速器
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;
}
}
零件
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);
行动
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})
}
解决方案
您需要使用bindActionCreators
将您的操作作为道具发送
import { bindActionCreators } from 'redux';
const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
const mapStateToProps = state => {
return {
isSigned: state.isSigned
}
}
export default connect(mapStateToProps, actions)(Loading);
// 在actions中,需要修复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});
}
}
推荐阅读
- sql-server - 授予功能上的选择似乎不起作用
- python - 尝试排除错误:不给出错误输入的输出
- sql - 使用 SQL 语言在 postgreSQL 中创建用户定义函数时出错
- php - 如何在 CodeIgniter 4 的帮助程序中编写数据库查询
- mysql - 将 nvarchar 值 '2151','1886' 转换为数据类型 int 时转换失败
- c# - .NET Core 3.1 中的 OData 配置
- azure - 在 Azure DevOps 中部署 Kubernetes 模板时如何查找 aadSessionkey 的值
- python - 从python中的文件中提取所有证书
- javascript - 无法使用 Javascript 根据键名合并两个不同的数组
- flutter - Flutter 构建失败并出现异常