react-redux-ui-state
v1.1.2
Published
React higher order component to provide UI state for components.
Downloads
334
Maintainers
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_<uuid>
oncomponentWillMount
- 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_<uuid>
- 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:
const uiStateConfig = {
...
name: props => `MyComponent__${props.className}`,
...
};
state {Function}
Extend the wrapper component's props, e.g.
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.
const uiStateConfig = {
...
persist: true,
...
};
Usage:
// 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 (
<button onClick={() => setUiState({
someUiFlag: !someUiFlag
},
updatedState => console.log(updatedState),
)}>
Toggle flag for {uiStateName}
</button>
<button
onClick={() =>
resetUiState(resetState => console.log(resetState))}
>
reset state
</button>
);
}
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!