https://github.com/dragos-tudor/frontend-states

Rewritten React redux library [functional principles].
https://github.com/dragos-tudor/frontend-states

functional functional-components functional-programming react-redux redux states

Last synced: about 1 month ago
JSON representation

Rewritten React redux library [functional principles].

• Host: GitHub
• URL: https://github.com/dragos-tudor/frontend-states
• Owner: dragos-tudor
• License: mit
• Created: 2023-11-22T16:32:20.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-21T17:52:19.000Z (3 months ago)
• Last Synced: 2024-10-22T08:32:21.493Z (3 months ago)
• Topics: functional, functional-components, functional-programming, react-redux, redux, states
• Language: JavaScript
• Homepage:
• Size: 87.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Frontend states library

- simplified React-Redux like library.

- Deno-based states management library [Node-free].

- functional-style library [OOP-free].

### Usage

```javascript

import {render} from "/scripts/rendering.js"

import {createAction, createStoreState, createReducer, dispatchAction, getStoreStates, setSelectors, useSelector, Store} from "/scripts/states.js"

const changeAuthAction = createAction("userState/changeAuth", {isAuth: true})

const userState = createStoreState("userState", ({ isAuth: false }))

const userStateReducer = createReducer("userState", {

  changeAuth: (userState, action) => ({ ...userState, ...action.payload })

})

export const App = () =>

  

    

    

  

export const UserLogin = (props, elem) => {

  const selectors = setSelectors(elem)

  const states = getStoreStates(elem)

  const isAuth = useSelector(selectors, "isAuth", (states) => states.userState.isAuth, states)

  return isAuth?

    
{props.logged}
:

     dispatchAction(elem, changeAuthAction)}>{props.login}

}


render(, document.body)

```

### Modules

- *high-level modules*: states, states-components.

- *low-level modules*: states-actions, states-html, states-middlewares, states-reducers, states-states, states-selectors, states-equalities.

- *low-level modules* completely independent ["parallel" modules].

### [State](./states/)

- main functionality: dispatch actions, reduce states, update states consumers.

- state means one states slice.

- reducer means one group of change state funcs.

- states operations:

  - `dispatchAction` if action change states then update consumers.

  - `chainMiddlewares` send actions through middlewares chain.

  - `runAction` based on action type reduce state.

  - `updateConsumers`:

    - when reduced state is different than previous state.

    - when previous selectors values are different than reduced state selectors values.

### [Components](./states-components/)

- main functionality: implement states components.

  - `Store`: register state, state reducer, actions middleware.