【问题标题】:In react, how do I access state inside an action creator?在反应中,我如何访问动作创建者内部的状态?
【发布时间】:2017-09-16 07:30:53
【问题描述】:

我的商店包含一个数组,当用户单击按钮时,我将向该数组追加新项目。这些物品的内容取决于商店其他地方设置的标志。

例如,如果用户之前启用了“设置 X”,则新数组项应包含 { type: 'x'} 而不是默认的 {type: 'y'}

我了解如何调度一个动作来执行添加一个新数组项,但我不知道如何组合该状态的其他部分的动作。

我的问题:

  1. 我真的需要在这里使用redux-thunk 吗?我找不到一个最终不会依赖它的 SO 答案。

  2. 我是 React 的新手,想了解为什么默认情况下这不可能。这是否是因为状态可能会在用户单击按钮和被调度的操作之间以某种方式发生变化?

  3. 我是否缺少更明显/hacky 的方法来执行此操作?我试过在mapDispatchToProps 中使用ownPropsownProps 似乎只包含connect() 提供的道具not 和它提供的“Setting X”is .

【问题讨论】:

  • 您可以利用每个减速器实际上处理每个状态更改的事实来作用于 2 个不同的减速器。所以你可以在 2 个 reducer 中使用相同的 case 语句。
  • 你的意思是用reducer A创建新的数组项,没有任何type,但是以某种方式识别它,以便第二个reducer B可以用type“升级”这个新数组项?对我来说,这听起来像是造成维护混乱的秘诀。
  • 嗯,是的,但这就是您所描述的情况。或者,也许我错过了什么?也许如果您可以输入一些代码,我们可以看看它会更容易提供帮助:)
  • 标志可以是动作的参数。您可以在组件中读取状态并在创建操作时将其传递。您还可以在查看子减速器中所有内容的父减速器中处理它。

标签: reactjs state react-redux redux-thunk


【解决方案1】:

我不明白你的要求,但如果你只是想通过一些设置来更新商店,你可以试试这个:

  1. 创建一个 action 来更改设置,并创建一个 reducer 来将设置保存在 store 中

    dispatch({
      type: 'CHANGE_SETTING',
      flag: X,
    })
    
  2. 使用redux-thunk,创建另一个动作, 它可以使用getState从商店获取设置,

    const updateArrayBySetting = (dispatch, getState) => {
        if (getState().setting === 'X') {
            dispatch(updateArray())  // contain type 'X'
        }
        if (getState().setting === 'Y') {
        }
    }
    

【讨论】:

    【解决方案2】:

    function reducer1(state = {x: true}, action) {
      switch (action.type) {
        case 'SOME_CHANGE':
          return {
            ...state,
            x: action.data.bool,
          }
        default:
          return state;
      }
    }
    function reducer2(state = {y: [1]}, action) {
      switch (action.type) {
        case 'SOME_CHANGE':
          return {
            ...state,
            y: [...action.data.arrayStuff],
          }
        default:
          return state;
      }
    }

    【讨论】:

      猜你喜欢
      • 2016-06-10
      • 1970-01-01
      • 1970-01-01
      • 2021-11-24
      • 2017-02-22
      • 2016-11-21
      • 1970-01-01
      • 2016-04-29
      • 2018-11-23
      相关资源
      最近更新 更多