【问题标题】:Does state reinitialize to initial state everytime an action is dispatched in react using redux?每次使用 redux 在反应中调度动作时,状态是否会重新初始化为初始状态?
【发布时间】:2020-05-21 22:29:12
【问题描述】:

例如在下面的代码中(注意:这段代码没什么特别的,只是作为一个例子):

 const INITIAL_STATE = {
  hidden: true,
  cartItems: []
};

const cartReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case CartActionTypes.TOGGLE_CART_HIDDEN:
      return {
        ...state,
        hidden: !state.hidden
      };
    case CartActionTypes.ADD_ITEM:
      return {
        ...state,
        cartItems: addItemToCart(state.cartItems, action.payload)
      };
    case CartActionTypes.REMOVE_ITEM:
      return {
        ...state,
        cartItems: removeItemFromCart(state.cartItems, action.payload)
      };
    case CartActionTypes.CLEAR_ITEM_FROM_CART:
      return {
        ...state,
        cartItems: state.cartItems.filter(
          cartItem => cartItem.id !== action.payload.id
        )
      };
    default:
      return state;
  }
};

Q1:状态是否恢复到 INITIAL_STATE 即,

{
  hidden: true,
  cartItems: []
};

每次向这个reducer分派一个动作?

Q2:那么 combinereducer 中的状态也会重新初始化为初始状态,比如在 reducer 中返回默认状态?或者换一种说法: Q3:combinreducer 中对应于特定 reducer 的状态不断重新初始化/设置为最近调度的 action 定义的状态,例如在上面的代码中,如果 CartActionTypes.ADD_ITEM 是最近分发给 reducer 的操作

 case CartActionTypes.ADD_ITEM:
      return {
        ...state,
        cartItems: addItemToCart(state.cartItems, action.payload)
      };

那么 combinereducer 中的状态将是(基于上述情况):

{
  hidden: true,
  cartItems: addItemToCart(state.cartItems, action.payload)
};

并且 hidden 将被重新初始化为 true ,而不管它的值可能由于早期的操作而处于什么状态?所以基本上最新调度的动作决定了哪些当前状态值将被改变,而不管之前调度的动作如何,并且最新调度未改变的状态值被重新初始化为初始状态?

问:如果我的理解是正确的,那么调用状态值(例如使用 mapStatetoProps)的各种组件是否只能访问最新调度定义的状态值?

【问题讨论】:

  • 否;这太疯狂了——只有在没有传入任何状态时才使用初始状态值。组件可以访问处于状态的任何内容。

标签: reactjs redux state dispatch


【解决方案1】:

当您调度一个动作时,它将被发送到 reducer,以根据 CURRENT STATE 和调度的 ACTION 计算下一个状态。

现在您的函数 cartReducer 接受 2 个参数,stateaction。您实际上是在告诉 reducer 函数,如果未提供任何状态,则使用 INITIAL_STATE。所以当你的 reducer 函数执行时,它会查看 state 的值是否为undefined。如果是这样,那么它将使用INITIAL_STATE 否则它将使用提供的状态值,即您当前的状态。

您可以查看更多关于 JavaScript here 中默认参数的信息。可以复习一下redux核心原理here

【讨论】:

  • 您好,感谢您的详细回复。因此,如果我的理解是正确的,则 INITIAL_STATE (通常)仅在调度第一个操作时使用。此后(通常)对于后续调度,reducer 使用当前状态或操作其值。
  • Yes INITIAL_STATE 用作当前状态,然后根据当前状态和调度的动作计算后续状态。
  • @abh 如果有帮助并解决了您的问题,您可以接受答案,这将对未来的观众有所帮助。
猜你喜欢
  • 1970-01-01
  • 2019-01-29
  • 2019-05-08
  • 1970-01-01
  • 2020-04-12
  • 2023-01-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多