context-store

context-store

使用 React Context API 实现的简单全局状态管理

npm install context-store

示例

// Store.js

import contextStore from "context-store";

export default contextStore({
  message: "hello",
  updateMessage() {
    this.setState({ message: `hello ${Math.random()}` });
  }
});

// AComponent.js

import React from "react";
import Store from "./Store";

export default () => (
  <Store.Consumer>{context => <div>{context.message}</div>}</Store.Consumer>
);

// BComponent.js

import React from "react";
import Store from "./Store";

export default () => (
  <Store.Consumer>
    {context => (
      <button onClick={() => context.updateMessage()}>updateMessage</button>
    )}
  </Store.Consumer>
);

// index.js

import React from "react";
import { render } from "react-dom";
import Store from "./Store";
import AComponent from "./AComponent";
import BComponent from "./BComponent";

const App = () => (
  <Store.Provider>
    <AComponent />
    <BComponent />
  </Store.Provider>
);

render(<App />, document.getElementById("root"));