@dkh-dev/reduxie
v1.1.6
Published
A redux toolkit for simple use cases
Downloads
9
Readme
@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