https://github.com/henrhie/minidux

Redux built from scratch
https://github.com/henrhie/minidux

react redux state-management zustand

Last synced: 4 months ago
JSON representation

Redux built from scratch

• Host: GitHub
• URL: https://github.com/henrhie/minidux
• Owner: henrhie
• Created: 2022-08-16T11:56:53.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-09-28T14:06:52.000Z (over 2 years ago)
• Last Synced: 2025-01-10T00:14:42.649Z (5 months ago)
• Topics: react, redux, state-management, zustand
• Language: JavaScript
• Homepage: https://stackblitz.com/edit/react-ljxzp2
• Size: 23.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Minidux - Redux from scratch

An attempt to understand global state management packages for React.

[Try on StackBlitz ⚡️](https://stackblitz.com/edit/react-ljxzp2)

## API Reference

#### createStore

| Parameter | Type     | Description                |

| :-------- | :------- | :------------------------- |

| `reducers` | `{ [state: any]: Function }` | creates a single minidux store |

#### combineReducers

| Parameter | Type     | Description                |

| :-------- | :------- | :------------------------- |

| `reducers` | `{ [state: any]: Function }` | combines several reducer functions into a single reducer function |

#### BindActionCreator

| Parameter | Type     | Description                |

| :-------- | :------- | :------------------------- |

| `actionCreator && dispatch` | `ActionCreator: Function && dispatch: Function` | binds a single action creator to the minidux store |

#### BindActionCreators

| Parameter | Type     | Description                |

| :-------- | :------- | :------------------------- |

| `actionCreators && dispatch` | `ActionCreators: { [key: any]: Function } && dispatch: Function` | binds several action creators to the minidux store |

#### store.subscribe()

| Parameter | Type     | Description                |

| :-------- | :------- | :------------------------- |

| `listener function` | `Function` | add subscription for a listener function which is invoked when the store is mutated |

#### store.dispatch(listener)

| Parameter | Type     | Description                |

| :-------- | :------- | :------------------------- |

| `action` | `object with required field, 'type'` | dispatches an action to mutate store. Only way to mutate store |

#### store.getState()

| Parameter | Type     | Description                |

| :-------- | :------- | :------------------------- |

| `n/a` | `n/a'` | returns the current state of store |

#### hooks

| Hook | Usage     | Description                |

| :-------- | :------- | :------------------------- |

| `useStore` | `const store = useStore()` | return the minidux store |

| `useDispatch` | `const dispatch = useDispatch()` | return the dispatch function used to mutate store |

| `useSelector` | `const state = useSelector(selectorFn)` | extract state based on selector function |

## Example

```javascript

//App.js

import * as React from 'react';

import { useSelector, bindActionCreators, useDispatch } from './minidux';

import { useState } from 'react';

const TodoList = ({ todos, deleteTodo }) => {

  return todos.map((todo) => {

    return (

      
 deleteTodo(todo.id)}>

        {todo.text}

      

    );

  });

};


export default function App() {

  const [inputText, setInputText] = useState('');

  /*to extract state from store*/

  const {

    count: { count },

    todos: { todos },

  } = useSelector(({ count, todos }) => ({ count, todos }));

  /*return dispatch function*/

  const dispatch = useDispatch();

  /*binds several action creators to minidux store*/

  const { increase, decrease, deleteTodo, addTodo } = bindActionCreators(

    dispatch,

    {

      increase: () => ({ type: 'increase' }),

      decrease: () => ({ type: 'decrease' }),

      deleteTodo: (id) => ({ type: 'delete_todo', payload: id }),

      addTodo: (text) => ({ type: 'add_todo', payload: text }),

    }

  );

  return (

    

      increase

      decrease

      
{count}

       {

          setInputText(e.target.value);

        }}

      />

       {

          addTodo(inputText);

        }}

      >

        add todo

      

      

    

  );

}


//index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

import { Provider, createStore, combineReducers } from './minidux';

const countReducer = (state = { count: 0 }, action) => {

  switch (action.type) {

    case 'increase':

      return { ...state, count: state.count + 1 };

    case 'decrease':

      return { ...state, count: state.count - 1 };

    default:

      return state;

  }

};

const todoReducer = (state = { todos: [], idRef: 0 }, action) => {

  switch (action.type) {

    case 'add_todo':

      const id_ = state.idRef;

      return {

        ...state,

        todos: [...state.todos, { id: state.idRef, text: action.payload }],

        idRef: state.idRef + 1,

      };

    case 'delete_todo':

      const filteredTodos = state.todos.filter(

        (todo) => todo.id !== action.payload

      );

      return { ...state, todos: filteredTodos };

    default:

      return state;

  }

};

/*combines several reducers into a single reducer function*/

const reducer = combineReducers({

  todos: todoReducer,

  count: countReducer,

});

/* create minidux store. */

/* Note that just like redux, you can have only one store in your application */

const store = createStore(reducer);

ReactDOM.createRoot(document.getElementById('root')).render(

  

    

      

    

  

);

```