减速器中加载的默认状态总是正确的？

Posted 2023-02-19

【中文标题】减速器中加载的默认状态总是正确的？

【英文标题】：default state of loading in reducer always true?

【发布时间】：2018-09-10 16:30:11

【问题描述】：

你们如何在 redux reducer 中处理加载状态的初始状态？它总是真实的吗？问题是你必须在 reducer 后面的每一种情况下都将其设置为 false。

像这样

const initState = 
  loading: true,
  data: null,
  error: null


export function global(state=initState, action) 
  switch(action.type)
    case FETCHING: 
      return 
        ...state,
        loading: true
      
    case FETCH_SUCESS:
      return 
        ...state,
        data: action.payload,
        loading: false
      
    case FETCH_FAILED:
      return 
        ...state,
        error: action.payload.error,
        loading: false
      
    default:
      return state
  

如果设置为 false 就会出现这个问题

class AClassName extends Component 
  constructor(props)
    super(props)
    props.callAnApi()
  

  //assume in reducer your loading initialstate is false

  render() 


    this.props.something && return <Redirect to=`/app/$this.props.something` />

    return !this.props.loading && <SomethingElse  ...this.props  />
  

加载完成后如何不返回任何内容。上面的问题是，SomethingElse 组件仍然会被渲染一次，这不是我想要的。那么你的初始加载状态是什么？

【问题讨论】：

请添加减速器

@RIYAJKHAN 完成，更新了我的问题并添加了减速器。

我的默认值为 false 并在需要时将其设置为 true，在您调用 api 的情况下，但我会将其放在 componentWillMount 而不是构造函数中。渲染将首先检查是否加载，这将是 API 调用的第一步是调度 'FETCHING' 操作，然后将加载设置为 true。然后，由于 API 调用是非阻塞的，一旦渲染方法被命中，加载将为 true，加载组件将显示，并且 API 调用成功时将加载设置为 false。

【参考方案1】：

const initState = 
  loading: false,
  data: null,
  error: null


export function global(state=initState, action) 
  switch(action.type)
    // Called first thing as part of callAnApi
    case FETCHING: 
      return 
        ...state,
        loading: true
      
    case FETCH_SUCESS:
      return 
        ...state,
        data: action.payload,
        loading: false
      
    case FETCH_FAILED:
      return 
        ...state,
        error: action.payload.error,
        loading: false
      
    default:
      return state
  



class AClassName extends Component 
  constructor(props)
    super(props);
  

  componentWillMount() 
    this.props.callAnApi();
  

  //assume in reducer your loading initialstate is false

  render() 

    this.props.loading && return <SomethingElse  ...this.props  />
    this.props.something && return <Redirect to=`/app/$this.props.something` />
  

这个流程一直对我有用

【参考方案2】：

考虑条件渲染，

用于渲染，this.props.loading 应该是假的 并跳过渲染， this.props.loading 应该是真的。

您可以简单地合并 需要时默认initState 默认值e.g.loading = true。

const initState = 
  loading: true,
  data: null,
  error: null


export function global(state = initState, action) 
  switch (action.type) 
    case FETCHING:
      return 
        
          ...state
        ,
        
          ...initState
        
      

    case FETCH_SUCESS:
      return 
        ...state,
        ...initState,
        data: action.payload,
      
    case FETCH_FAILED:
      return 
        ...state,
        ...initState,
        error: action.payload.error,
        loading: false
      
    default:
      return  ...state,
        ...initState
      
  

【讨论】：

所以是的，您仍然首先将初始状态的加载设置为true，但是为什么要将初始状态与状态合并？状态已经默认值为初始状态，请参阅函数的参数。

当默认状态是初始状态时，为什么要传播状态和初始状态？

@JamieAden state is already default value is initialstate 仅在第一次加载减速器时并不总是

@RemeJuan state when by default state is initial state希望你能理解。状态并不总是初始状态。它会随着每一次动作的调度而改变

@RIYAJKHAN 是的，一旦reducer实例化，即在应用程序实例化时，它的状态设置为初始状态，以后的调用将更新该状态，不需要在状态和初始状态中传播。