redux-namespace v1.0.3
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
import { createStore, combineReducers } from 'redux';
import { reducer } from 'redux-namespace';
const store = createStore(combineReducers({namespace: reducer}));
Connect your components
This is probably too easy. Just name your namespace, then select
and assign
how you like.
connect('pizza')(({ pizza }) =>
<input
value={pizza.select('delivery.time')
onChange={pizza.assign('delivery.time', 'target.value')) />)
Let's look at that again.
import * as namepsace from 'redux-namespace';
const Form = namespace.connect('form', 'signin')((props) => {
let { form } = props;
return (
<View>
<TextInput
value={form.select('email')} onChange={form.assign('email')}/>
<TextInput
value={form.select('password')} onChange={form.assign('password')}/>
<TouchableHighlight onPress={e => dispatch(someAction(form.select()))}>
<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.assigns('email', 'target.value')}/>
And sometimes we have to be even pickier than that.
<CustomInput onChange={ns.assigns('email', (event, value) => value)}/>
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
.
import { connect, shape } from 'redux-namespace'
@connect('list', (props) => props.id || 'new')
class ProductForm extends Component {
static propTypes = {
productsList: shape
}
render () {
let { list: ns } = this.props;
return (
<form onSumbit={() => ns.dispatch(someAction(ns.select()))}/>
<input
value={ns.select('product.name')}
onChange={ns.assigns('product.name', 'target.value')}/>
<input
value={ns.select('product.price')}
onChange={ns.assigns('product.price', 'target.value')}/>
</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: '🌾' },
]
@connect('productsList')
const ProductManager = (props) =>
<div>
{productList.map((product) => {
// This will alway return the same cursor
const cursor = props.productList.cursor(product.id);
// We don't need to set it everytime, but it's safe to
cursor.defaults(product);
return <ProductForm product={cursor}/>
}
)}
</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!
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago