Javascript 在React上下文API中共享类实例安全吗？

我正在React Native中构建一个问答游戏，并使用Redux Thunk存储游戏开始时创建的游戏对象

它存储的内容如下：

• 游戏模式、玩家、问题、当前回合、当前玩家、当前问题（作为索引）

redux thunk的问题在于处理不同的游戏模式和逻辑

使用这样的游戏类是否是一种良好的做法：

class Game {
  constructor() {
    Object.assign(this, DEFAULT_STATE);
  }

  init = (gamemode, players) => {
    // set Gamemode
    switch (gamemode) {
      case "classic":
        this.gamemode = new Classic();
        break;
    }
    // set Players
    this.players = players;

    // set Gameparameters
    this.parameters = this.gamemode.getGameParameters();

    // set Questions
    this.questions = this.gamemode.prepareQuestions();
  };

  // Getters
  getPlayerCount = () => this.players.length;
  getCurrentRound = () => this.currentRound + 1;
  getCurrentRoundIndex = () => this.currentRound;
}

---

并通过上下文API在提供程序中共享，以访问其状态和功能？

这是一个非常广泛的问题。我将用我自己的观点来回答这个问题，关于我将如何处理这样的情况

自从React 16.3以来，我发现内置的上下文api比Redux更容易使用，也更强大。以下是设置上下文提供程序的方法：

const DEFAULT_STATE = {
  gameMode: 'default',
  players: [],
  currentRound: 1,
  ...
};

export const MyContext = React.createContext(DEFAULT_STATE);
export const MyConsumer = MyContext.Consumer;

class MyProvider extends Component {
  state = DEFAULT_STATE;

  componentDidMount() {
    // query your api on app start here
  }

  render() {
    return (
     <MyContext.Provider
       value={{
         state: this.state,
         setState: (name, value, callback = () => {}) => {
           this.setState({ [name]: value }, callback);
         },
         incrementRound: () => {
           const { currentRound } = this.state;
           this.setState({ currentRound: currentRound + 1 });
         },
         // any other functions you want to expose to your consumer
       }}
     >
      {this.props.children}
     </MyContext.Provider>
  }
};

export default MyProvider;

---

祝你的比赛好运

Redux旨在提供全局状态，可以使用

connect（）

直接从任何组件访问。是的，我知道。但我不确定这样管理状态是否是我在游戏中的最佳实践，而不仅仅是ui状态。

ReactDOM.render(
 <MyProvider><App /></MyProvider>,
 document.getElementById('root')
);

class SomeComponent extends Component {
  state = {/* component state */};

  incrementRound = (context) => {
    // option a: access state directly
    const { currentRound } = context.state;
    context.setState('currentRound', currentRound + 1);
    // option b: expose function to handle state
    context.incrementState();
  };      

  render() {
    return (
      <section>
        <div>{/* some other stuff */}</div>
        <MyConsumer>
          {context => {
            const { currentRound } = context.state;
            return (
             <div>{currentRound}</div>;
             <button>Click to update round!</button>
            );
          }}
        </MyConsumer>
      </section>
    );
  }
}

const stateKeysObj = {};
Object.keys(DEFAULT_STATE).forEach(key => {
  stateKeysObj[key] = key;
});
export const stateKeys = Object.freeze(stateKeysObj);