0.0.6 • Published 6 years ago
redux-ui-tekk v0.0.6
redux-ui-tekk
Quick Start
import React, { Component } from "react"
import { ui } from "redux-ui-tekk"
const ParentComponent = ui({
initialState: {
parentValue: "parentValue",
},
selector: (uiState, props, wholeState) => ({
parentValue: uiState.parentValue,
childValue: uiState.childvalue, // Not accessible by parent
}),
})(({ parentValue, childValue }) => (
<div>
<h2>Parent Component</h2>
<pre>{parentValue}</pre>
<pre>{childValue}</pre>
<ChildComponent />
</div>
))
const ChildComponent = ui({
initialState: {
childValue: "childValue",
},
selector: (uiState, props, wholeState) => ({
parentValue: uiState.parentValue,
childValue: uiState.childvalue,
}),
})(({ childValue, parentValue }) => (
<div>
<h2>Child Component</h2>
<pre>{parentValue}</pre>
<pre>{childValue}</pre>
</div>
))
export default class Demo extends Component {
render() {
return (
<div>
<h1>Demo</h1>
<ParentComponent />
</div>
)
}
}
Installation
npm install --save redux-ui-tekk
Overview
The aim is to provide a simple and flexible way to model ui state.
Recipes
- removing the use of setState (replace setState with updateState, replace state constructor with initialState configuration)
- Modal Component (using the reducer configuration)
- Meaningful demo
- Show that ui state managent can replace setState, and allows easy lifting of state
- common pattern to lift state into parent components when many siblings need to access the same state
- using setState require the parent component to become a class component and be aware of the additional state that it needs to pass down to its children even if it doesn't use the state itself
- uiState simply requires you to move the state declaration to the parent component. The parent component need not be aware of the change
API
ui(config: UIConfig)(Comp: ReactComponent): ReactComponent
options
interface UIConfig {
key?: string
initialState?: object
selector?(state: any, props?: any, wholeState?: any): any
reducer?: { [key: string]: Reducer }
}
reducer
The reducer that manages all the ui state.
import { reducer as uiReducer } from "redux-ui-tekk"
import { combineReducers } from "redux"
const reducer = combineReducers({
ui: uiReducer,
otherState: otherStateReducer,
// ...whatever your heart desires
})
uiMiddleware
Add this middleware to enable the reducer configuration property of ui().
It works by maintaining a map of component reducers and dispatching additional actions when a reducer whenever a reducer returns a non null result.
import { createStore, combineReducers, applyMiddleware } from "redux"
import { reducer as uiReducer, uiMiddleware } from "redux-ui-tekk"
const reducer = combineReducers({
ui: uiReducer,
otherState: otherStateReducer,
// ...whatever your heart desires
})
const store = createStore(reducer, applyMiddleware(uiMiddleware))