with-view-state

use redux to store some state in view component

Install

npm install with-view-state --save

Introduction

people use redux may confused when to use setState and when to use dispatch reducer action.

this package is aimed to store the state to redux. Forget setState, enjoy redux!

usefull for these situations:

• show/hide modal
• submitting/done button
• loading/hide spinner

Usage

1. add the reducer to your reducers

import { combineReducers } from 'redux';
import { reducer as viewState } from 'with-view-state';

// reducers = ....

export default combineReducers({
  ...reducers,
  viewState
});

2. wrap your component:

import withViewState  from 'with-view-state'
//  YourComponent : .....

const config = {
  id: 'myComponent',      //defualt is a random string, set some name if you need
}

const wrapped = withViewState(config)(YourComponent)

3. get/set in your componet

class YourComponent extends Component{

  onClick = () => {
    this.props.setViewState({ submitting: true } )
  }

  render() {
    const { viewState } = this.props;
    const { submitting } = viewState;
    // ....
  }
}

or dummy component:

const YouCompoent = ({viewState, setViewState}) => {
  //....
}

Configure

The configure that the decorator withViewState() accepts.

getViewState : Function(store): viewStateStore

default is

(store) => store.viewState

if your reducer is not at sotre.viewState, set another function

mapViewProps : Function(thisViewState) => props

default is

(state) => ({viewState: state})

this makes the component use props.viewState to get the state of the view. you can use another function as you wish

keepState : Bool || Function(props) Bool

As default, when a view is unmounted, it's view state will be removed from the store, you can set keepState = true to keep it , or set a function to determin by the props.

some configures will be deprecated in future:

reducerName : String

set the store name in reducer, default is 'viewState'

propName: String

set the props where can get the view state for a view , default is 'viewState'

Props

The props that generated to give to your decorated component.

setViewStateAction : Function(Object): action

This is a bound action creator for the view, it return the action

setViewState : Function(Object) :Void

this function dispatch a bound view update action

dispatchWithIndicator: Function(action, indicator) : Void

this function will first dispatch a indicator start action and then dispatch the action with a meta fields onCompleteAction which is the idicator complete action.

indicator: String || Object

when indicator is a string, it will be as the field name, in start it will be true, on completed, it will be false, if indicator is a object, it will be itself on start, and on completed, it will be a object with the same keys, but every value si false

for explain:

indicator = "submitting"

//on start :
viewState = {submitting : true, ...others }
//completed:
viewState = {submitting : false, ...others }

or

idicator = { spin: "double-bounce" , submitting: true }

//on start:
viewState = { spin: "double-bounce", submitting: true, ...others }
//completed:
viewState = { spin: false, submitting: false, ...others }

Notice: You must use some async handlers like redux-saga to dispatch the onCompleteAction.