@dkh-dev/reduxie

@dkh-dev/reduxie

A redux toolkit for simple use cases

Inspired by @reduxjs/toolkit.

Why all these reinventing the wheel?

@reduxjs/toolkit makes use of immer, which isn't very useful when the project is relatively small. This utility instead encourages the use of setter-only action creators.

@reduxjs/toolkit also comes with default middlewares that cause poor performance when dispatching large objects (in development only, but still bad).

Example

redux/slice/profile.js

import { createSlice } from '@dkh-dev/reduxie'

const { slice, selectors, actions } = createSlice('profile', {
  name: null,
})

export default slice
export const { getName } = selectors
export const { setName } = actions

redux/store.js

import { configureStore } from '@dkh-dev/reduxie'
import thunk from 'redux-thunk'
import profile from './slice/profile'

const store = configureStore({
  slices: [ profile ],
  middlewares: [ thunk ],
})

export default store

redux/actions.js

import api from '../api'
import { setName } from './slice/profile'

export const login = credentials => async dispatch => {
  const user = await api('/login', credentials)

  // on logged in
  dispatch(setName(user.name))
}

components/profile.js

import React from 'react'
import { useSelector } from 'react-redux'
import { nameSelector } from '../redux/slice/profile'

const Profile = () => {
  const name = useSelector(nameSelector)

  return <p>Name: { name }</p>
}

export default Profile

components/login.js

import React from 'react'
import { useDispatch } from 'react-redux'
import LoginForm from './login-form'
import { login } from '../redux/actions'

const Login = () => {
  const dispatch = useDispatch()

  const handleSubmit = (username, password) => {
    dispatch(login({ username, password }))
  }

  return <LoginForm onSubmit={ handleSubmit } />
}

export default Login