Build redux logic, without getting nervous ❤️
Description
Redux Cool
is an awesome tiny package that allows you to easily and intuitively write redux logic. It is the collection of two separate libraries, one designed to create reducer functions and the other to create action objects: (Reducers Creator for creating reducers functions and Actions Creator for creating actions object)
Installation
npm install redux redux-cool
Getting Started
Create a file named src/accountReducer.js
src/accountReducer.js
import {reducersCreator} from "redux-cool"
const initialState = {
profile: {
data: null
}
}
const reducerTree = {
PROFILE: {
SET: (state, action) => {
const [data] = action.args
state.profile.data = data
},
UPDATE_EMAIL: (state, action) => {
const [email] = action.args
state.profile.data.email = email
}
},
CLEAR: (state, action) => {
state.profile.data = null
}
}
const accountReducer = reducersCreator(
"ACCOUNT",
initialState,
reducerTree,
)
export default accountReducer
As you can see in the example above, we create an accountReducer
by calling the reducersCreator
function and passing it three arguments:
-
"ACCOUNT"
: It's the name of the reducer, it can be anyString
-
initialState
: It's the initial state of the reducer, it can be anyObject
-
reducerTree
: It's anObject
(can have any deep and nested structure) that intuitively and in readible ways, defineshandler functions
for reducer.Handler functions
as an argument takestate
andaction
and update the state. It automatically uses the immer library to do immutable updates with normal mutative code, likestate.profile.data.email = email
. There is no need to manually do immutable updates and return the result. If you are not familiar with the immer library, please look at it, it is very important.
As a result, we get the accountReducer
function, which can handle the following type of actions:
- types:
"PROFILE/SET"
or"ACCOUNT/PROFILE/SET"
- types:
"PROFILE/UPDATE_EMAIL"
or"ACCOUNT/PROFILE/UPDATE_EMAIL"
- types:
"CLEAR"
or"ACCOUNT/CLEAR"
As you can see, each handler can work with two types of actions, one consisting of the path described in reducerTree, the second is the same as the first type plus the reducer name that should be added from the beginning like "CLEAR"
and "ACCOUNT/CLEAR"
. That is the most important and useful feature of this library.
In both cases ("CLEAR"
and "ACCOUNT/CLEAR"
), the CLEAR handler is called in the accountReducer, but when we have multiple reducers that have the CLEAR handler and we need to clear the state of all reducers, we must use "CLEAR"
action type, but if we need to delete only the ACCOUNT reducer state we must use the "ACCOUNT/CLEAR"
action type.
Now that we have the accountReducer, let's create the redux store
Create a file named src/store.js
src/store.js
import {createStore} from "redux"
import {actionsCreator} from "redux-cool"
import accountReducer from "./accountReducer.js"
// Create Store
const store = createStore(accountReducer)
// Dispatch Set Profile Action
store.dispatch(actionsCreator.PROFILE.SET({
email: 'test@test',
name: 'Test'
})
)
console.log(store.getState())
// {
// profile: {
// data: {email: 'test@test', name: 'Test'}
// }
// }
// Dispatch Update Email Action
store.dispatch(actionsCreator.PROFILE.UPDATE_EMAIL('test2@test2'))
console.log(store.getState())
// {
// profile: {
// data: {email: 'test2@test2', name: 'Test'}
// }
// }
// Dispatch Clear Email Action
store.dispatch(actionsCreator.CLEAR())
console.log(store.getState())
// {
// profile: {
// data: null
// }
// }
Top comments (4)
It's not the same redux-toolkit, there is not even a feature similar to redux-toolkit ․ I will explain now․
1. Nested reducers tree capability
In redux-cool we can build our reducerTree with any deep and nested structure ․ which redux-toolkit cannot do. For example
2. Ability to create actions independent of the reducer
For example:
3. Actions With Callback capability
For example:
4. See: here
That's basically the
redux-toolkit
, isn't it? I like to use, and also works well with Typescript.@eliasj
It's not the same redux-toolkit, there is not even a feature similar to redux-toolkit ․ I will explain now․
1. Nested reducers tree capability
In redux-cool we can build our reducerTree with any deep and nested structure ․ which redux-toolkit cannot do. For example
2. Ability to create actions independent of the reducer
For example:
3. Actions With Callback capability
For example:
4. See: here
Nice!
Some comments have been hidden by the post's author - find out more