https://github.com/rjz/typescript-react-reducer-component

A minimal React state container, written in TypeScript
https://github.com/rjz/typescript-react-reducer-component

Last synced: 17 days ago
JSON representation

A minimal React state container, written in TypeScript

• Host: GitHub
• URL: https://github.com/rjz/typescript-react-reducer-component
• Owner: rjz
• Created: 2018-03-08T05:22:19.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-08T05:22:38.000Z (almost 7 years ago)
• Last Synced: 2024-10-22T12:07:17.752Z (2 months ago)
• Language: TypeScript
• Size: 66.4 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# TypeScript React Reducer Components

A minimal state container inspired by Reason's [state reducers][reason-reducer],

adapted for TypeScript.

## Usage

Using the example factory in [`src/reducerComponent`](src/reducerComponent),

creating new reducer components is as easy as 1, 2, 3...

1. Declare `State` and [`Action`][ts-actions] types for the component.

```typescript

type Action =

| 'INCREMENT'

| 'DECREMENT';

type State = {

  count: number,

};

```

2. `make` the component from a reducer and a rendering function.

```typescript

import * as RC from './reducerComponent';

const Counter: RC.Component = ({ count, send }) => (

  


    
Count: {count}

    


       send('INCREMENT')}>+1

       send('DECREMENT')}>-1

    

  

);


const reduce: RC.Reducer = (state, action) => {

  switch (action) {

    case 'INCREMENT':

      return { count: state.count + 1 };

    case 'DECREMENT':

      return { count: state.count - 1 };

    default:

      return state;

  }

};

export default RC.make(reduce)(Counter);

```

3. Profit

## Example

```sh

$ yarn

$ yarn start

```

## License

ISC

[ts-actions]: https://rjzaworski.com/2016/09/typescript-redux-async-actions

[reason-reducer]: https://github.com/reasonml/reason-react/blob/master/docs/state-actions-reducer.md