redux-prim

redux helper tool to abstract action and reducer with getDefaultState and updaters.

Usage no npm install needed!

<script type="module">
  import reduxPrim from 'https://cdn.skypack.dev/redux-prim';
</script>

README

redux-prim

redux-prim builds an abstract layer on top of redux, making state management as it should be:

  • The initial state: getDefaultState
  • State modification: updaters and namespacing

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.

Install

npm i redux-prim

Simple example

Create 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 { userReducer } from './userSlice';
import { appReducer } from './appSlice';

export default combineReducers({
  ...userReducer,
  ...appReducer
});

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>
  )
}