https://github.com/dkh-dev/reduxie
A redux toolkit for simple use cases
https://github.com/dkh-dev/reduxie
Last synced: 24 days ago
JSON representation
A redux toolkit for simple use cases
- Host: GitHub
- URL: https://github.com/dkh-dev/reduxie
- Owner: dkh-dev
- License: isc
- Created: 2020-04-04T07:00:35.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-01-17T18:52:56.000Z (over 5 years ago)
- Last Synced: 2025-09-18T01:57:15.652Z (9 months ago)
- Language: JavaScript
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @dkh-dev/reduxie
_A redux toolkit for simple use cases_
> Inspired by [@reduxjs/toolkit](https://github.com/reduxjs/redux-toolkit).
> Why all these reinventing the wheel?
>
> [@reduxjs/toolkit](https://github.com/reduxjs/redux-toolkit) makes use of [immer](https://github.com/immerjs/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](https://github.com/reduxjs/redux-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`
```javascript
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`
```javascript
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`
```javascript
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`
```jsx
import React from 'react'
import { useSelector } from 'react-redux'
import { nameSelector } from '../redux/slice/profile'
const Profile = () => {
const name = useSelector(nameSelector)
return
Name: { name }
}
export default Profile
```
`components/login.js`
```jsx
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
}
export default Login
```