Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jasonmorita/react-redux-ui-state
React higher order component to provide UI state for components.
https://github.com/jasonmorita/react-redux-ui-state
react redux state state-management
Last synced: 1 day ago
JSON representation
React higher order component to provide UI state for components.
- Host: GitHub
- URL: https://github.com/jasonmorita/react-redux-ui-state
- Owner: jasonmorita
- License: mit
- Created: 2017-07-16T00:20:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-02T21:57:13.000Z (about 6 years ago)
- Last Synced: 2024-09-22T03:11:47.936Z (about 2 months ago)
- Topics: react, redux, state, state-management
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-redux-ui-state
- Size: 445 KB
- Stars: 19
- Watchers: 3
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# Truly painless UI state for components.
### Install
```
npm i react-redux-ui-state -S
```
```
yarn add react-redux-ui-state
```
## Goals of this library
* Make it easy to have component state in Redux
* Make it possible to have "internal" state with or without using classes
* Reduce Redux boilerplate for properties like UI flags
* Easily allow multiple instances of the same component to get their own unique
state
* Get the benefits of Redux without most of the work for UI state
## How it works
* Create a config object with an optional name property and a function (which
gets passed props) which returns a state object consisting of your initial
state.
* Wrap your component in the HOC.
* An action gets dispatched like `UI_STATE_ADD:some-component_` on
`componentWillMount`
* The initial state gets added to a `uiState` slice of the store with the
name/state.
* Call `setUiState` with a new state object.
* An action gets dispatched like `UI_STATE_SET:some-component_`
* Component state gets removed from store on `componentWillUnmount` (optional)
`setUiState`: Simple update function that accepts an object that will be shallow
merged with current state. Accepts an optional callback called with the state
change.
`resetUiState`: Function to reset component to initial state. Accepts an
optional callback called with the initial state.
## uiState Options
#### `name {String | Function}`
If a string is provided a uuid will be suffixed in order not to overwrite the
state in the store. Providing a function gives you the ability to create your
own unique name, with the ability to use the component's `props`, e.g:
```js
const uiStateConfig = {
...
name: props => `MyComponent__${props.className}`,
...
};
```
#### `state {Function}`
Extend the wrapper component's props, e.g.
```js
const uiStateConfig = {
...
state: (props) => ({
uiProp: 'uiProp',
uiActive: props.active,
}),
...
};
```
#### `persist {Boolean}`
Defaults to `false`. If `true` the component's state will not be removed from
the `uiState` domain.
```js
const uiStateConfig = {
...
persist: true,
...
};
```
## Usage:
```javascript
// rootReducer.js
import { combineReducers } from 'redux';
import { uiStateReducer } from 'react-redux-ui-state';
export default function createRootReducer (reducers) {
return combineReducers({
...reducers,
uiState: uiStateReducer,
});
}
// someComponent.js
import React from 'react';
import { uiState } from 'react-redux-ui-state';
export function someComponent ({
someUiFlag,
somePassedThing,
resetUiState,
setUiState,
uiStateName,
}) {
return (
setUiState({
someUiFlag: !someUiFlag
},
updatedState => console.log(updatedState),
)}>
Toggle flag for {uiStateName}
resetUiState(resetState => console.log(resetState))}
>
reset state
);
}
const uiStateConfig = {
name: 'some-component',
persist: true, // optional
state: (props) => ({
someUiFlag: false,
somePassedThing: props.x ? props.x : null;
}),
};
export default uiState(uiStateConfig)(someComponent);
```
## Example app
There is a simple example app made with `create-react-app` in the `./example`
folder. Simple `cd` into that directory, `yarn install && yarn start`. You can
edit the `App.js` file to add more instances of the `Button` and `Text`
components.
Feel free to open a PR!