Namespace your component state in your Redux store
npm install redux-namespaceRedux Namespace
=============
Dead simple tool moving component local state into a Redux namespace.
``shell`
npm install --save redux-namespace
redux-namespace it's a key value store, with depth.
`js`
yarn add redux-namespace
#### Attach the Reducer
`js
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.`js`
connect('pizza')(({ pizza }) =>
value={pizza.select('delivery.time')
onChange={pizza.assign('delivery.time', 'target.value')) />)`
Let's look at that again.js
import * as namepsace from 'redux-namespace';
const Form = namespace.connect('form', 'signin')((props) => {
let { form } = props;
return (
)
})
`assign
But _you_ know what's up, 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.
`js``
And sometimes we have to be even pickier than that.js`
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.`js
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 (
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.
`jsconst productList = [
{ id: 1, name: '🦄', price: '🌈' },
{ id: 2, name: '🐿', price: '🥜' },
{ id: 3, name: '🐮', price: '🌾' },
]
@connect('productsList')
const ProductManager = (props) =>
{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
}
)}
`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. ✌️
Get in touch, let's make it work!