react-hooks-stores v6.6.6

定义store

//  stores/themeStore.js

class Store {
  // state, // store绑定到Provider后会自动注入，用于渲染和读取
  // dispatch, // store绑定到Provider后会自动注入，用于更新状态

  // 初始化状态，初始值在这里设置
  initialState = {
    name: 'Theme',
    datas: []
  }

  // 拆分的reducer，函数名即是action.type的值，一步搞定拆分reducer和定义action.type
  // 使用：store.dispatch({type: 'setName', data: '传参'})
  setName(name) {
    const state = { ...this.state }
    state.name = name
    return state // 返回修改新state【必须】
  }

  setDatas(datas) {
    const state = { ...this.state }
    state.datas = datas
    return state // 返回修改新state【必须】
  }

  // 接口请求数据更新状态【样例】
  apiFetch() {
    const body = { name: this.state.name }
    window.fetch('/api/test', { method: 'POST', body }).then(res => {
      this.dispatch({type: 'setDatas', data: res})
    })
  }
}

export default new Store()

根组件注入store，可以多个

// App.js
import React from 'react'
import { Provider } from './lib/store'
import themeStore from './stores/themeStore'
import authStore from './stores/authStore'

function App() {
  return (
    <Provider themeStore={themeStore} authStore={authStore}>
      {/* 组件 */}
    </Provider>
  );
}

export default App;

hooks组件内使用

// components/Demo1.jsx

import React from 'react'
import { useStore } from '../lib/store'

export default function () {
  const themeStore = useStore('themeStore')

  const handleChangeName = () => {
    themeStore.dispatch({ type: 'setName', data: 'Theme' + Math.random() })
  }

  const handleGetDatas = () => {
    themeStore.apiFetch()
  }

  React.useEffect(() => {
    console.log('组件更新啦')
  })

  return <div>
    <button onClick={handleChangeName}>更改数据</button>
    <div>{themeStore.state.name}</div>
    <button onClick={handleGetDatas}>请求数据</button>
  </div>
}

类组件内使用

// components/Demo3.jsx
import React from 'react'
import { inject } from '../lib/store'

class Demo3 extends React.Component{

  componentDidMount() {
    console.log('Demo3渲染啦')
  }

  componentWillUpdate() {
    console.log('Demo3更新啦')
  }

  onclick = () => {
    this.props.themeStore.dispatch({ type: 'setName', data: 'Theme' + Math.random() })
  }

  render () {
    const { state } = this.props.themeStore
    
    return <div>
      <button onClick={this.onclick}>Demo3点击</button>
      <div>{state.name}</div>
    </div>
  }
}

export default inject('themeStore')(Demo3)