slice-hooks

帮助你更简单地使用redux

作者

白切
wechat: feng-baiqie

文档

初始化：

// base/slice-hooks.js
// 创建redux，然后作为new SliceHooks的入参
import SliceHooks from 'slice-hooks'
import { createStore } from 'redux'

function defaultReducer(state = {}, action) {
  switch (action.type) {
    default:
      return state
  }
}

export default new SliceHooks(createStore(defaultReducer))

use-store：

import sliceHooks from 'base/slice-hooks'

const initialState = {
  number: 1,
  arr: [{ label: 'hey,' }, { label: 'im joy' }]
}

const slice = sliceHooks.createSlice({
  name: 'use-store',
  initialState,
})

const { useStore, set } = slice

export default () => {
  const { number, arr } = useStore()

  return (
    <div>
      <div>
        number is
        <br />
        {number}
      </div>
      <div>
        arr is:
        <br />
        {arr.map(item => item.label)}
      </div>
      <button
        onClick={() => set({ number: number + 1 })}
      >
        +1
      </button>
      <button
        onClick={() => {
          set((draftState) => {
            draftState.arr[1].label = 'im mike'
          })
        }}
      >
        call me mike
      </button>
    </div>
  )
}

use-thunks：

import sliceHooks from 'base/slice-hooks'

const initialState = {
  number: 1,
}

const slice = sliceHooks.createSlice({
  name: 'use-thunkx',
  initialState,
  thunks: {
    async thunk1(num) {
      await new Promise((resolve) => {
        setTimeout(resolve, 500)
      })

      this.set((draftState) => {
        draftState.number += num
      })

      this.thunk2() 
    },
    async thunk2() {
      await new Promise((resolve) => {
        setTimeout(resolve, 500)
      })

      const { number } = this.get()
      console.log('now, number is:', number)
    }
  }
})

const { useStore, useThunks } = slice

export default () => {
  const { number } = useStore()
  const { thunk1 } = useThunks()

  return (
    <div>
      <div>
        number is
        <br />
        {number}
      </div>
      <button onClick={() => thunk1(2)}>
        async to +2
      </button>
    </div>
  )
}

use-dispatch：

import sliceHooks from 'base/slice-hooks'

const initialState = {
  number: 1
}

const slice = sliceHooks.createSlice({
  name: 'use-dispatch',
  initialState,
  reducers: {
    add(draftState, action) {
      draftState.number += action.payload
    }
  }
})

const { useStore, useDispatch, useActions } = slice

export default () => {
  const { number } = useStore()
  const dispatch = useDispatch()
  const { add } = useActions()

  return (
    <div>
      <div>
        number is
        <br />
        {number}
      </div>
      <button
        onClick={() => {
          // @redux/toolkit的action写法，是一个语法糖
          dispatch(add(2))
        }}
      >
        +2
      </button>
      <button
        onClick={() => {
          // redux原生写法
          dispatch({ type: 'use-dispatch/add', payload: 3 })
        }}
      >
        +3
      </button>
    </div>
  )
}

use-selector：

const { useDispatch, useSelector } = slice // you could use any slice

export default () => {
  // by this, you can get any slice state
  // get use-promise page state
  const { name } = useSelector(state => state['use-promise'])
  const dispatch = useDispatch()

  return (
    <div>
      supprise, i get the value in use-promise page：
      {name}
      <button
        onClick={() => dispatch({ type: 'use-promise/change', payload: 'use-selector' })}
      >
        change name
      </button>
    </div>
  )
}

promise：

import sliceHooks from 'base/slice-hooks'

const initialState = {}

const slice = sliceHooks.createSlice({
  name: 'use-promise',
  initialState,
  thunks: {
    async thunkThen() {
      await new Promise((resolve) => {
        setTimeout(resolve, 1000)
      })
      
      return 123
    },
    async thunkError() {
      await new Promise((resolve) => {
        setTimeout(resolve, 1000)
      })

      throw new Error('哈哈')
    }
  }
})

const { useThunks } = slice

export default () => {
  const { thunkThen, thunkError } = useThunks()

  return (
    <div>
      <button
        onClick={() => {
          thunkThen().then((result) => {
            console.log('then', result)
          })
        }}
      >
        then
      </button>
      <button
        onClick={() => {
          thunkError().catch((err) => {
            console.log('catch', err)
          })
        }}
      >
        catch
      </button>
      <button
        onClick={async () => {
          const result = await thunkThen()
          console.log('await', result)
        }}
      >
        await
      </button>
    </div>
  )
}