https://github.com/sijiecai/redux-prim

redux helper tool to abstract action and reducer with getDefaultState and updaters.
https://github.com/sijiecai/redux-prim

abstraction contracts-programming data-driven react redux reusability

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sijiecai/redux-prim
• Owner: SijieCai
• License: mit
• Created: 2018-07-24T13:12:09.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-05-29T00:55:40.000Z (over 1 year ago)
• Last Synced: 2024-12-16T19:51:41.868Z (about 1 month ago)
• Topics: abstraction, contracts-programming, data-driven, react, redux, reusability
• Language: TypeScript
• Homepage:
• Size: 164 KB
• Stars: 82
• Watchers: 7
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

```shell

npm i redux-prim

```

## Simple example

Create a todo slice

``` javascript

import createSlice from 'redux-prim';

const {actions, reducer, selector} = createSlice('todo',

()=>({ visible: false }),

({ setState }) => {

  return {

    setTodoVisibility(todoVisible) {

      return setState({ todoVisible });

    }

  }

});

```

combine reducers

``` javascript

import { combineReducers } from 'redux';

import todoSlice from './todoSlice';

export default combineReducers({

  ...todoSlice.reducer

});

```

use slice

``` javascript

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 (

    


      {todo.visible ? 
this is todo
 : show todo}

    

  )

}

```