{"id":23635359,"url":"https://github.com/filefoxper/use-agent-reducer","last_synced_at":"2025-08-31T11:31:00.371Z","repository":{"id":39839049,"uuid":"271476542","full_name":"filefoxper/use-agent-reducer","owner":"filefoxper","description":"mix reducer and class together, so we can use react useReducer like useClass, but still like use a reducer.","archived":false,"fork":false,"pushed_at":"2022-11-08T04:45:44.000Z","size":322,"stargazers_count":13,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-09-24T03:59:12.876Z","etag":null,"topics":["agent","class","class-reducer","hook","model","model-management","react","state","typescript","usereducer"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/filefoxper.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE_LOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-11T07:07:19.000Z","updated_at":"2022-11-06T09:01:08.000Z","dependencies_parsed_at":"2022-08-09T15:34:53.690Z","dependency_job_id":null,"html_url":"https://github.com/filefoxper/use-agent-reducer","commit_stats":null,"previous_names":[],"tags_count":32,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filefoxper%2Fuse-agent-reducer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filefoxper%2Fuse-agent-reducer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filefoxper%2Fuse-agent-reducer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filefoxper%2Fuse-agent-reducer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filefoxper","download_url":"https://codeload.github.com/filefoxper/use-agent-reducer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231590314,"owners_count":18396922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent","class","class-reducer","hook","model","model-management","react","state","typescript","usereducer"],"created_at":"2024-12-28T05:34:08.322Z","updated_at":"2024-12-28T05:34:08.833Z","avatar_url":"https://github.com/filefoxper.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm][npm-image]][npm-url]\n[![standard][standard-image]][standard-url]\n\n[npm-image]: https://img.shields.io/npm/v/use-agent-reducer.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/use-agent-reducer\n[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[standard-url]: http://npm.im/standard\n\n# use-agent-reducer\n\n other language: [中文](https://github.com/filefoxper/use-agent-reducer/blob/master/README_zh.md)\n\n [Document](https://filefoxper.github.io/use-agent-reducer/#/)\n\n[agent-reducer](https://www.npmjs.com/package/agent-reducer) is a very powerful tool, it converts a model object (`OriginAgent`) to be a state changeable object (`Agent`). It is designed on the reducer running base. Every thing returned from an `Agent` method will be a next state.\n\n`use-agent-reducer` is designed for using `agent-reducer` in react hooks environment。\n\nWe can compare a classify reducer with `agent-reducer` model.\n\n```typescript\nimport {OriginAgent} from \"agent-reducer\";\n\n    interface Action {\n        type?: 'stepUp' | 'stepDown' | 'step' | 'sum',\n        payload?: number[] | boolean\n    }\n\n    /**\n     * classify reducer\n     * @param state\n     * @param action\n     */\n    const countReducer = (state: number = 0, action: Action = {}): number =\u003e {\n        switch (action.type) {\n            case \"stepDown\":\n                return state - 1;\n            case \"stepUp\":\n                return state + 1;\n            case \"step\":\n                return state + (action.payload ? 1 : -1);\n            case \"sum\":\n                return state + (Array.isArray(action.payload) ?\n                    action.payload : []).reduce((r, c): number =\u003e r + c, 0);\n            default:\n                return state;\n        }\n    }\n\n    /**\n     * agent-reducer model\n     */\n    class CountAgent implements OriginAgent\u003cnumber\u003e {\n\n        state = 0;\n        \n        stepUp(): number { \n            return this.state + 1;\n        }\n\n        stepDown = (): number =\u003e this.state - 1;\n\n        step = (isUp: boolean) =\u003e isUp ? this.stepUp() : this.stepDown();\n\n        sum(...counts: number[]): number {\n            return this.state + counts.reduce((r, c): number =\u003e r + c, 0);\n        };\n\n    }\n```\n\nThe code below is designed for a count change model, we can call method from `CountAgent` instance, and make every return to be a next state, this running mode is similar with reducer working mode, but more simple.\n\n\nuse `useAgentReducer` to replace `useReducer`.\n\n```typescript\nimport React,{memo} from 'react';\nimport {OriginAgent} from \"agent-reducer\";\nimport {useAgentReducer} from 'use-agent-reducer';\n\n/**\n * model class\n */\nclass CountAgent implements OriginAgent\u003cnumber\u003e {\n\n    state = 0;\n        \n    // increase state by 1\n    stepUp(): number{ \n        return this.state + 1;\n    }\n\n    // decrease state by 1\n    stepDown = (): number =\u003e this.state - 1;\n\n    step = (isUp: boolean) =\u003e isUp ? this.stepUp() : this.stepDown();\n\n    sum(...counts: number[]): number {\n        return this.state + counts.reduce((r, c): number =\u003e r + c, 0);\n    };\n\n}\n\nexport const Counter = memo(() =\u003e {\n    // useAgentReducer returns an `Agent` object,\n    // which is the agent of model CountAgent.\n    // we can get state and other property values from it.\n    const {state,stepUp,stepDown} = useAgentReducer(CountAgent);\n    return (\n        \u003cdiv\u003e\n            \u003cbutton onClick={stepUp}\u003estepUp\u003c/button\u003e\n            \u003cspan\u003e{state}\u003c/span\u003e\n            \u003cbutton onClick={stepDown}\u003estepDown\u003c/button\u003e\n        \u003c/div\u003e\n    );\n});\n```\n\nThe code below shows how to use API `useAgentReducer` with `OriginAgent` model, there are some concepts and designs about `agent-reducer` you should know first, you can learn these from [agent-reducer](https://filefoxper.github.io/agent-reducer/#/), then you will know what can be a model and why after reassign `Agent` method (`stepUp`) into another object, keyword `this` still represent `Agent` when the method is running.\n\nAs `agent-reducer` is designed by taking a next state from an `Agent` method return, we can not take a promise resolve data to be next state, but we can use `MiddleWare` in `agent-reducer` to reproduce a promise object, and take its resolve data as next state.\n\n```typescript\nimport React,{memo,useEffect} from 'react';\nimport {middleWare,MiddleWarePresets, OriginAgent} from \"agent-reducer\";\nimport {useAgent} from 'use-agent-reducer';\n\n/**\n * model\n */\nclass CountAgent implements OriginAgent\u003cnumber\u003e {\n\n    state = 0;\n        \n    stepUp = (): number =\u003e this.state + 1;\n\n    stepDown = (): number =\u003e this.state - 1;\n\n    step = (isUp: boolean) =\u003e isUp ? this.stepUp() : this.stepDown();\n\n    sum = (...counts: number[]): number =\u003e {\n        return this.state + counts.reduce((r, c): number =\u003e r + c, 0);\n    };\n\n    // return promise will change the state to be a promise object,\n    // use MiddleWarePresets.takePromiseResolve(),\n    // can take the promise resolve value to be next state\n    @middleWare(MiddleWarePresets.takePromiseResolve())\n    async requestAdditions(){\n        const args = await Promise.resolve([1,2,3]);\n        return this.sum(...args);\n    }\n\n}\n\nexport const Counter = memo(() =\u003e {\n    const {state,stepUp,stepDown,requestActions}=useAgent(CountAgent);\n\n    useEffect(()=\u003e{\n        requestActions();\n    },[]);\n\n    return (\n        \u003cdiv\u003e\n            \u003cbutton onClick={stepUp}\u003estepUp\u003c/button\u003e\n            \u003cspan\u003e{state}\u003c/span\u003e\n            \u003cbutton onClick={stepDown}\u003estepDown\u003c/button\u003e\n        \u003c/div\u003e\n    );\n});\n```\nIf you want to know more about `useAgentReducer`, check [document](https://filefoxper.github.io/use-agent-reducer/#/) here.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilefoxper%2Fuse-agent-reducer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilefoxper%2Fuse-agent-reducer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilefoxper%2Fuse-agent-reducer/lists"}