redux-prim builds an abstract layer on top of redux, making state management as it should be:
- The initial state:
getDefaultState - State modification:
updatersandnamespacing
The actions and reducers are greatly weaken, while under the abstraction layer, everything stays the same:
- State is a single immutable object tree.
- Actions describe updates.
- Reducer pure function to apply updates.
- Redux's ecosystem
This abstraction is more in line with the human brain's understanding of the data, and supports custom updater to achieve code reuse. Redux-prim also provides interfaces for data contract design.
npm i redux-primCreate a todo slice
import createSlice from 'redux-prim';
const {actions, reducer, selector} = createSlice('todo',
()=>({ visible: false }),
({ setState }) => {
return {
setTodoVisibility(todoVisible) {
return setState({ todoVisible });
}
}
});combine reducers
import { combineReducers } from 'redux';
import todoSlice from './todoSlice';
export default combineReducers({
...todoSlice.reducer
});use slice
import React, { useCallback } from 'react';
import todoSlice from './store/todoSlice';
import { useSelector, useDispatch } from 'react-redux';
const { actions, selector } = todoSlice;
function App() {
const todo = useSelector(selector);
const dispatch = useDispatch();
const showTodo = useCallback(() => dispatch(actions.setTodoVisibility(true)), []);
return (
<div>
{todo.visible ? <div>this is todo</div> : <button onClick={showTodo}>show todo</button>}
</div>
)
}