Redux Namespace
Dead simple tool moving component local state into a Redux namespace.
npm install --save redux-namespace
Motivation
Got transient state without a home? Do your components lose it when they unmount? Are you swimming in a pool of reducers that do one thing? Then Redux Namespace is for you, because all those problems are tedious and boring, and you have better things to do!
redux-namespace
it's a key value store, with depth.
Usage
yarn add redux-namespace
Attach the Reducer
;; const store = ;
Connect your components
This is probably too easy. Just name your namespace, then select
and assign
how you like.
<input value=pizza onChange=pizza) />)
Let's look at that again.
; const Form = namespace { let form = props; return <View> <TextInput value=form onChange=form/> <TextInput value=form onChange=form/> <TouchableHighlight onPress= > <Text>Submit</Text> </TouchableHighlight> </View> }
But you know what's up, assign
is returning a function. A funtion that sets the path you give it to the value it gets.
But it's not always that easy, sometimes we have to be picky.
<input onChange=ns/>
And sometimes we have to be even pickier than that.
<CustomInput onChange=ns/>
How about lists? We can pick a value from props, or pass it a string. So connect('list', 'item')
will become a prop called list
, but its values will be assigned to list.item
.
@ static propTypes = productsList: shape { let list: ns = thisprops; return <form onSumbit= ns/> <input value=ns onChange=ns/> <input value=ns onChange=ns/> </form> }
But you don't have to manage it in one place. You can create a cursor—a pointer to one part of your namespace. It has all the same functions, but applied to its own descendant path.
const productList = id: 1 name: '🦄' price: '🌈' id: 2 name: '🐿' price: '🥜' id: 3 name: '🐮' price: '🌾' @const ProductManager = <div> productList </div>
You can also reset
your namespace, see if it was touched
and track its version
. See the full API here.
It's not the Redux reducer we need, but it's the one I wrote, so have fun with it. ✌️
Psst.
Know how to make it the reducer we need?
Get in touch, let's make it work!