context-store

context-store

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

npm install context-store

示例

// Store.js

import contextStore from 'context-store'

export default contextStore({
  message: 'hello',
  updateMessage(message) {
    this.setState({ message })
  },
})

// AComponent.js
// 方式一：需要获取状态时，使用 <Store.Consumer> 包裹

import React from 'react'
import Store from './Store'

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

// BComponent.js
// 方式二：创建带状态的组件 Store.Component()

import React from 'react'
import Store from './Store'

export default Store.Component((props, context) => (
  <button onClick={() => context.updateMessage(props.message)}>
    updateMessage
  </button>
))

// 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 message="world" />
  </Store.Provider>
)

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