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

【问题标题】：Access React context value from redux-saga function从 redux-saga 函数访问 React 上下文值
【发布时间】：2024-04-16 20:35:01
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs redux react-redux redux-saga react-context

【解决方案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 模块变量并按需导入.
但是如果我需要访问真正的反应上下文（例如路由器上下文......）呢？