从子组件向 React 上下文添加价值

Question

我正在尝试在我的 React Native 应用程序中使用 React 上下文作为状态管理器。

以下是上下文：

import React, { createContext, useState, useEffect } from "react";
import axios from "axios";
export const GlobalContext = createContext();
export const Provider = ({ children }) => {
  const [tracksList, setTracksList] = useState([
    {
      track_list: []
    }
  ]);
  useEffect(() => {
    axios
      .get(
        `https://cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/chart.tracks.get?page=1&page_size=10&country=us&f_has_lyrics=1&apikey=${
          process.env.REACT_APP_MM_KEY
        }`
      )
      .then(res => {
        setTracksList([
          {
            track_list: res.data.message.body.track_list
          }
        ]);
      })
      .catch(err => console.log(err));
  }, []);
  return (
    <GlobalContext.Provider value={[tracksList, setTracksList]}>
      {children}
    </GlobalContext.Provider>
  );
};
export const Consumer = GlobalContext.Consumer;

子组件。在这里，我想进行 API 调用以获取用户并将此用户字段设置为全局上下文。我可以从消费者那里获取上下文值，但是如何设置新的上下文值？

import React, { useContext } from "react";
import { GlobalContext } from "../../context/context";
const Demo = () => {
  const contextValue = useContext(GlobalContext);
  console.log(contextValue, "Context outside from JSX");
  return <div>Content</div>;
};
export default Demo;

那么，是否有可能从每个子组件向 React 上下文添加新值，就像在 Redux 中一样？提前感谢！

Answer 1

您可以使用useReducer效果来实现 Redux reducer：

// Create context
export const ApiContext = React.createContext();
// Create some reducer function
const reducer = (state, action) => {
  if (action.type === 'some action name') {
    return {
      ...state,
      report: action.payload,
    };
  }
  return state;
};
// Overwrite a context provider
const Provider = ({ children }) => {
  const [state, dispatch] = React.useReducer(reducer, {});
  return (
    <ApiContext.Provider
      value={{
        ...state,
        dispatch,
      }}
    >
      {children}
    </ApiContext.Provider>
  );
};

然后，您可以在组件中使用，如下所示：

const Component = () => {
  const { dispatch, report } = React.useContext(ApiContext);
  React.useEffect(() => {
    const asyncPost = async () => {
      const response = await fetch('some endpoint', {
        method: 'POST',
      });
      const payload = await response.json();
      // This will call a reducer action and update a state
      dispatch({
        type: 'some action name',
        payload,
      });
    }
  }, []);
  ...
};

因此，当挂载Component时，状态将是一个空对象。然后，当您使用 some action name 操作更新状态时，状态将变为 { report: some data from fetch } 。