solid-redux-hooks v0.0.1

solid-redux-hooks

Redux hooks for Solid.

Installation

npm i solid-redux-hooks

yarn add solid-redux-hooks

API

ReduxStore

// store.ts
import { configureStore, createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state += 1
  },
})

export const { increment } = counterSlice.actions

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
})

// index.ts
import { render } from 'solid-js/web'
import { Provider } from 'solid-redux-hooks'

import App from './App'
import { store } from './store'

render(() => (
    <Provider store={store}>
      <App />
    </Provider>
), document.getElementById("root"))

Hooks

useSelector

import { useSelector } from 'solid-redux-hooks'

export const CounterComponent = () => {
  const count = useSelector(state => state.counter)
  return <div>{count}</div>
}

useDispatch

import { useDispatch } from 'solid-redux-hooks'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()
  const increaseCounter = dispatch({ type: 'increase-counter' })
  return (
    <div>
      <span>{value}</span>
      <button onClick={increaseCounter}>Increase counter</button>
    </div>
  )
}

useStore

import { useStore } from 'solid-redux-hooks'

export const ExampleComponent = () => {
  const store = useStore()
  return <div>{store.getState()}</div>
}

License

MIT License © 2021 Robert Soriano