0.0.2 • Published 6 years ago
combine-selectors-redux v0.0.2
combineSelectors(selectors)
This module follows the patterns set out by redux with combineReducers
. It allows you to colocate your selectors with the reducer state they work on and simplifies their usage. It follows a pattern outlined by Dan Abramov in a free egghead.io lesson here
The basic idea is to use combineSelectors
everywhere you use combineReducer
as you progressively build up your store state. This allows a convenient way to access more complicated derived state (provided through selector functions) following your store state.
Example:
export const selectors = combineSelectors({
potato: potatoSelectors,
tomato: tomatoSelectors
});
// Like combineReducers, this will produce an object where the selectors are called with the section of the redux state it's keyed by
{
potato: {
// ... potato selectors
},
tomato: {
// ... tomato selectors
},
}
The access of your selectors now mirrors your redux state.
Example:
reducers/todos.js
export default function todos(state = {}, action) {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
[action.payload.id]: action.payload.text
}
default:
return state
}
}
// Selectors
export const getTodo = (state, id) => state[id];
export const getAllIds = state => Object.keys(state);
reducers/counter.js
export default function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// Selectors
export const getCount = state => state;
reducers/index.js
import { combineReducers } from 'redux'
import { combineSelectors } from 'combine-selectors-redux'
import todos, * as todoSelectors from './todos'
import counter, * as counterSelectors from './counter'
export default combineReducers({
todos,
counter
})
export const selectors = combineSelectors({
todos: todoSelectors,
counter: counterSelectors
})
App.js
import { createStore } from 'redux'
import reducer, { selectors } from './reducers/index'
let store = createStore(reducer)
console.log(store.getState())
// {
// todos: [],
// counter: 0
// }
console.log(selectors)
// {
// todos: function() {...},
// counter: function() {...}
// }
console.log(selectors.todos.getAllIds())
// []
console.log(selectors.counter.getCount())
// 0