如何使用 redux 为 react js 设置加载状态

Posted 2023-02-22

【中文标题】如何使用 redux 为 react js 设置加载状态

【英文标题】：how to set a loading state for react js with redux

【发布时间】：2021-03-26 02:30:14

【问题描述】：

我正在使用 redux，并且我想在我的应用程序从 api 捕获数据以及当我的 reducer 中有 null 数据时显示我的应用程序的加载状态 我试过了，但我没有加载文本

    if (this.props.isSignedIn === true) 
      return <div
        style= textAlign: "right" >
        <Link to='/streams/new' className='ui button primary'>
          create new stream
      </Link>
      </div>
    
    if (this.props.isSignedIn === false) 
      return <div style= fontSize: '30px' >Not a user? sign in now, it's free </div>
    
    if (this.props.isSignedIn ===null) 
      <div>loading...</div>
    
    

这里是连接和mapstatetoprops函数

const mapStateToProps = state => 
  return 
    streams: Object.values(state.streams),
    userId: state.auth.userId,
    isSignedIn: state.auth.isSignedIn
  ;
;

export default connect(
  mapStateToProps,
   fetchStreams 
)(StreamList);

这里是减速器

import  SIGN_IN, SIGN_OUT  from '../actions/types';

const INTIAL_STATE = 
  isSignedIn: null,
  userId: null
;

export default (state = INTIAL_STATE, action) => 
  switch (action.type) 
    case SIGN_IN:
      return  ...state, isSignedIn: true, userId: action.payload ;
    case SIGN_OUT:
      return  ...state, isSignedIn: false, userId: null ;
    default:
      return state;
  
;

这里是动作

export const signIn = userId => 
  return 
    type: SIGN_IN,
    payload: userId
  ;
;

export const signOut = () => 
  return 
    type: SIGN_OUT
  ;
;

注意：

在 true 和 false 工作正常的情况下，除了 null

【问题讨论】：

您是否将isSignedIn 变量设置为null？

是的，它一开始是空的，随着时间的推移而变化

也发布你的 redux 操作和 reducer 来帮助你更好

我更新了我的问题，顺便说一句，它在真假情况下都能正常工作

【参考方案1】：

通常通过在商店中设置“加载”属性并添加额外的操作（例如“SIGN_INIT”）来完成

所以你的减速器看起来像这样：

const INTIAL_STATE = 
  isSignedIn: null,
  loading: false,
  userId: null
;


export default (state = INTIAL_STATE, action) => 
  switch (action.type) 
    case SIGN_INIT:
      return  ...state, loading: true ;
    case SIGN_IN:
      return  ...state, isSignedIn: true, loading: false, userId: action.payload ;
    case SIGN_OUT:
      return  ...state, isSignedIn: false, loading: false, userId: null ;
    default:
      return state;
  
;

因此，当您尝试登录或注销时，首先您发送 SIGN_INIT，它将“正在加载”设置为 true。每当请求完成时，SIGN_IN\SIGN_OUT 操作将在商店中更新您的“加载”道具，并且将通知组件加载完成。

【讨论】：

我只定义了一个加载值并将其默认设置为 true ，每当调用动作时我将值更改为 false ，它有什么不同吗？