Repository files navigation

npm i react-redux-ui-state -S

yarn add react-redux-ui-state

• 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 uniquestate
• Get the benefits of Redux without most of the work for UI state

• Create a config object with an optional name property and a function (whichgets passed props) which returns a state object consisting of your initialstate.
• Wrap your component in the HOC.
• An action gets dispatched likeUI_STATE_ADD:some-component_<uuid> oncomponentWillMount
• The initial state gets added to auiState slice of the store with thename/state.
• CallsetUiState with a new state object.
• An action gets dispatched likeUI_STATE_SET:some-component_<uuid>
• Component state gets removed from store oncomponentWillUnmount (optional)

setUiState: Simple update function that accepts an object that will be shallowmerged with current state. Accepts an optional callback called with the statechange.

resetUiState: Function to reset component to initial state. Accepts anoptional callback called with the initial state.

If a string is provided a uuid will be suffixed in order not to overwrite thestate in the store. Providing a function gives you the ability to create yourown unique name, with the ability to use the component'sprops, e.g:

constuiStateConfig={    ...name:props=>`MyComponent__${props.className}`,    ...};

Extend the wrapper component's props, e.g.

constuiStateConfig={    ...state:(props)=>({uiProp:'uiProp',uiActive:props.active,}),    ...};

Defaults tofalse. Iftrue the component's state will not be removed fromtheuiState domain.

constuiStateConfig={    ...persist:true,    ...};

// rootReducer.jsimport{combineReducers}from'redux';import{uiStateReducer}from'react-redux-ui-state';exportdefaultfunctioncreateRootReducer(reducers){returncombineReducers({        ...reducers,uiState:uiStateReducer,});}// someComponent.jsimportReactfrom'react';import{uiState}from'react-redux-ui-state';exportfunctionsomeComponent({    someUiFlag,    somePassedThing,    resetUiState,    setUiState,    uiStateName,}){return(<buttononClick={()=>setUiState({someUiFlag:!someUiFlag},updatedState=>console.log(updatedState),)}>            Toggle flag for{uiStateName}</button><buttononClick={()=>resetUiState(resetState=>console.log(resetState))}>resetstate</button>);}constuiStateConfig={name:'some-component',persist:true,// optionalstate:(props)=>({someUiFlag:false,somePassedThing:props.x ?props.x :null;}),};exportdefaultuiState(uiStateConfig)(someComponent);

There is a simple example app made withcreate-react-app in the./examplefolder. Simplecd into that directory,yarn install && yarn start. You canedit theApp.js file to add more instances of theButton andTextcomponents.

Feel free to open a PR!