{"id":15413531,"url":"https://github.com/troch/react-redux-reformed","last_synced_at":"2025-04-19T11:56:24.160Z","repository":{"id":57343324,"uuid":"88848123","full_name":"troch/react-redux-reformed","owner":"troch","description":"Forms with React and Redux made simple","archived":false,"fork":false,"pushed_at":"2017-09-26T18:57:28.000Z","size":29,"stargazers_count":61,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-07T18:11:09.768Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/troch.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-20T09:34:56.000Z","updated_at":"2023-07-05T07:11:01.000Z","dependencies_parsed_at":"2022-09-12T07:00:16.686Z","dependency_job_id":null,"html_url":"https://github.com/troch/react-redux-reformed","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troch%2Freact-redux-reformed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troch%2Freact-redux-reformed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troch%2Freact-redux-reformed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troch%2Freact-redux-reformed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/troch","download_url":"https://codeload.github.com/troch/react-redux-reformed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240386221,"owners_count":19793140,"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":[],"created_at":"2024-10-01T16:57:38.053Z","updated_at":"2025-03-01T20:31:16.251Z","avatar_url":"https://github.com/troch.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/troch/react-redux-reformed.svg?branch=master)](https://travis-ci.org/troch/react-redux-reformed)\n\n# react-redux-reformed\n\nForms with React and Redux made simple: start with the bare minimum, no magic, then __use composition__ (components, functions, global and local states) to create more complex forms. This package has no external dependencies and will have a very little impact on your bundle (\u003c 1.5kB gzipped).\n\n__This package is similar to [react-reformed](https://github.com/davezuko/react-reformed), and I encourage you to look at it and read its README.__\n\n__This package contains:__\n\n- A reducer factory\n- A higher-order component wrapping `connect` (from react-redux package)\n- Validation helpers\n\n__This package does not contain:__\n\n- Components: you can easily create your own form components, for native and web\n- Event handlers and UI elements state management (focused, blurred, touched, submitted, etc...): you can choose to include them in your redux store, or simply use local state\n- Async validation of input values: use state and component composition to solve those more complex problems\n- Currently doesn't work with nested objects\n\n\n## Table of contents\n\n[1. Get started in no time](#get-started-in-no-time)  \n[2. API reference](#api-reference)  \n[3. Build your own API](#build-your-own-api)  \n\n\n## Get started in no time\n\n__1. Include your forms in your store__\n\n```js\nimport { createStore, combineReducers } from 'redux';\nimport { createFormReducer } from 'react-redux-reformed';\n\nconst reducer = combineReducers({\n    form: createFormReducer('myForm', { name: '' })\n})\n```\n\n__2. Bind your form to your store__\n\n```js\nimport React, { PureComponent } from 'react';\nimport { connectForm } from 'react-redux-reformed';\nimport { isRequired } from 'react-redux-reformed/validate';\n\nclass MyForm extends PureComponent {\n    submitHandler = (evt) =\u003e {\n        evt.preventDefault();\n        // Send the model somewhere\n    };\n    nameChangeHandler = (evt) =\u003e setFormField('name', evt.target.value);\n\n    render() {\n        const { model, modelValidity, setFormField, resetForm } = this.props;\n\n        return (\n            \u003cform onSubmit={ this.submitHandler }\u003e\n                \u003cinput name='name' value={ model.name } onChange={ this.nameChangeHandler } /\u003e\n\n                \u003cbutton type='submit' disabled={ !modelValidity.valid }\u003eSubmit\u003c/button\u003e\n\n                \u003cbutton type='button' onClick={ resetForm }\u003eReset\u003c/button\u003e\n            \u003c/form\u003e\n        );\n    }\n}\n\nconst formName = 'myForm';\nconst formSelector = (state) =\u003e state.form;\nconst validators = [\n    isRequired('name')\n]\n\nexport default connectForm(formName, formSelector, validators)(MyForm);\n```\n\nAnd that's it, you have a basic form set up, connected to your redux store and with validation.\n\n\n## API reference\n\n### createFormReducer(formName: string, initialFormState: object, options: object)\n\nA form reducer can react to 3 types of actions:\n- Reset state actions: to reset the state\n- Set state actions: to amend the current state\n- Replace state actions: to replace the current state\n\nSet and replace work similarly to local state in React (`setState`, `replaceState`).\n\n```js\nimport { createFormReducer } from 'react-redux-reformed';\n\nconst reducer = createFormReducer(\n    'myForm',\n    { name: '' },\n    {\n        resetActions: [\n            (action) =\u003e action.type === 'CREATE_USER_RECEIVE' \u0026\u0026 !action.error\n        ]\n    }\n);\n```\n\n- `formName`: the form name, so the reducer knows if actions can be applied or ignored\n- `initialFormState`: to initialise your form\n- `options`: see below\n\nOptions:\n\n- `resetActions`: a list of actions which can reset your form reducer. The list can contain action types (strings) or functions of actions (returning a boolean). The last one is useful for piggy backing on other actions like successful AJAX requests (see example above).\n- `mergeState`: a function to merge state received in `SET_FORM_STATE`. By default, it performs a shallow merge.\n\n\n### connectForm(formName: string, formSelector: function, validators: array)\n\n```js\nimport { connectForm } from 'react-redux-reformed';\nimport { isRequired } from 'react-redux-reformed/validate';\n\nconst MyConnectedForm = connectForm(\n    'myForm',\n    (state) =\u003e state.form\n)(MyForm);\n```\n\n- `formName`: the form name, so the actions can be created with it (and touch the right reducer)\n- `formSelector`: so your form can be located (connectForm has no idea where your form is otherwise) \n- `validators`: a list of validation functions, see `validator` function below\n\nThe following props will be available:\n\n- `model`: the form object stored in your redux store\n- `modelValidity`: if validators are supplied (optional), a validity report is added to the props\n- Action creators: `setFormState`, `replaceFormState`, `setFieldState`, `resetFormState`\n\nA model validity looks like the following (don't call one of your fields `valid`):\n\n```js\nconst modelValidity = {\n    valid: false,\n    name: {\n        valid: true,\n        required: true\n    },\n    email: {\n        valid: false,\n        require: true,\n        email: false\n    }\n};\n```\n\n\n### validator(fieldName: string, validationFn: function, name: string)\n\n```js\nimport { validator } from 'react-redux-reformed';\n\nconst minLength = (fieldName, min) =\u003e\n    validator(\n        fieldName,\n        (val) =\u003e val \u0026\u0026 val.length \u003e= min,\n        'minLength'\n    );\n```\n\n- `fieldName`: the name of the field being validated\n- `validationFn: a function of the field value, returning `true` (if valid) or `false` (if not valid)\n- `name`: the validator name. Optional if `validationFn` is named\n\n\nFor reference purposes, a `isRequired` validator is included (but that's the only one). Don't call one of your validators `valid`.\n\n\n## Build your own API\n\nYou might want to compose selectors and actions together in your own `connect` HOC, have validation in a selector or in a separate higher-order component, or simply compose things together differently.\n\n### createModelValidator(...validators)\n\n```js\nimport { createModelValidator, isRequired } from 'react-redux-reformed/validate';\n\nconst validateModel = createModelValidator(isRequired('name'));\n\nvalidateModel({ name: 'hello' })\n// Prints:\n{\n    valid: true,\n    name: {\n        valid: true,\n        required: true\n    }\n}\n```\n\n### setFormState(formName: string)(state: object)\n\n```js\nimport { SET_FORM_STATE, setFormState } from 'react-redux-reformed/actions';\n```\n\nAction creator for action type `SET_FORM_STATE`.\n\n\n### setFieldState(formName: string)(fieldName: string, fieldValue: any)\n\n```js\nimport { SET_FORM_STATE, setFormState } from 'react-redux-reformed/actions';\n```\n\nAction creator using `setFormState` action creator.\n\n\n### replaceFormState(formName: string)(state: object)\n\n```js\nimport { REPLACE_FORM_STATE, replaceFormState } from 'react-redux-reformed/actions';\n```\n\nAction creator for action type `REPLACE_FORM_STATE`.\n\n\n### resetFormState(formName: string)(state: object)\n\n```js\nimport { RESET_FORM_STATE, resetFormState } from 'react-redux-reformed/actions';\n```\n\nAction creator for action type `RESET_FORM_STATE`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroch%2Freact-redux-reformed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftroch%2Freact-redux-reformed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroch%2Freact-redux-reformed/lists"}