从 redux-saga 函数访问 React 上下文值

Posted 2023-04-14

【中文标题】从 redux-saga 函数访问 React 上下文值

【英文标题】：Access React context value from redux-saga function

【发布时间】：2020-01-01 19:15:08

【问题描述】：

我有一些由 React Context 通过 React.createContext() 和 Provider 和 Consumer 组件控制的变量。我也在使用 redux-saga，所以我的问题是无论如何都可以在 redux-saga 函数中访问这个上下文值。我正在寻找与 redux-store 一起使用的“yield select”语句。

知道的人请给我解释一下。提前谢谢你。

P/S：目前，我在调度动作时将上下文值传递给动作对象有效负载。所以在 redux-saga 中，我们可以在 action 参数中使用它。我不知道这是否是最佳做法。

【参考方案1】：

编辑：现在有一个包可以让您轻松获取上下文，react-outside-call

您可以保留提供程序组件的外部引用，并从中获取状态。

这样的……

提供者组件

class AppProvider extends Component 
  state = 
    number: 10,
  

  render() 
    return (
      <AppContext.Provider value=this.state>
        this.props.children 
      </AppContext.Provider>
    )
  

Apps 主入口文件，或者您引用该提供程序实例的任何位置。

let appProviderRef
export const getProviderState = () => appProviderRef.state

ReactDOM.render(
  <AppProvider ref=ref => appProviderRef = ref>
    <App />
  </AppProvider>
, document.getElementById('root'))
 

您现在可以从您的 redux sagas（或您想要的任何地方）中获取状态，同步调用 getProviderState

【讨论】：

上下文的重点是为特定的子树提供替代值，据我所知，这只会获取上下文的第一个值，它可以只使用普通的 js 模块变量并按需导入.

但是如果我需要访问真正的反应上下文（例如路由器上下文......）呢？