Reduck Store 🦆

Simple react state reducer inspired on redux.

Description

• This project was mainly developed for education purposes.
• Reduck works just like redux, it creates a store, reducers, and dispatches events where needed.
• It uses essentially the same synthax patterns as redux.

Demo

Installation

npm i reduck-store

We will be using this structure in the next examples

📜 app.tsx
📜 home.tsx
📂 store
  └─ 📜 index.tsx
  └─ 📂 reducer
     └─ 📜 age.tsx

Implementation

Create a reducer src/store/reducer/age.tsx

export const ReducerAge = {
  name: 'age',
  initialValue: 20,
  reducers: {
    increment(props?: any, state?: number){
      return state + 1
    }
  }
}

Create a Store and Typings src/store/index.tsx

StoreValue receives the type of the reducers and the type of the value itself

import { createStore, StoreValue } from "reduck-store"
import { ReducerAge } from "./reducer/age"

type StoreState = {
  age: StoreValue<typeof ReducerAge.reducers, number>
}

export const { store, useStore } = createStore<StoreState>([ ReducerAge ])

Usage

Wrap provider around your app

import StoreProvider from "reduck-store"
import { store } from "./store"

function App() {
  return (
    <StoreProvider {...store}>
      <Home />
    </StoreProvider>
  )
}

Access the store

import { useStore } from "./store"

function Home() {

  const { age } = useStore()

  return (
    <div>
      // call reducer
      <button onPress={age.increment}>Increment</button>
      
      // display value
      <div>{age.value}</div>
    </div>
  )
}

Differences

In Redux you would have something like this:

dispatch(increment())

In Reduck we do it like this:

age.increment()

The big difference would be on the state object itself and the way it is structured and accessed.
So essentially in Reduck every state object contains its reducers and values.

TODO

• Create example app
• Improve typings usage