ReduxQL
Proof of concept for using GraphQL to select data from a Redux store.
Under active development, but definitely not ready for production!
npm i --save reduxql@0.0.1-pre1
Motivation
When using Redux, it is advisable to keep your reducers as "dumb" as possible by keeping the minimum amount of state in your store.
While rendering, we then have to transform this Redux store into props for our components. You probably use a library like react-redux or reselect to accomplish this.
This library allows us to declaratively define these "selectors" as a GraphQL schema over the Redux store to provide a more robust interface for handling local data.
Example
Support we have a local Redux store that contains data for a nested TodoList:
todos: 0: tag: 'Weekend picnic' childTodoIds: '1' '2' 1: tag: 'Make juice' childTodoIds: 2: tag: 'Cut vegetables' childTodoIds: rootIds: '0' expandedTodoIds: '0'
We need to transform our data so that our "dumb" components can render it. Wouldn't it be great if we could just use a GraphQL query to provide the data?
1. Define a Schema
const typeDefs = ` schema { query: RootQuery } type Todo { id: ID! tag: String children: [Todo] } type RootQuery { todos(): [Todos]! }`; const resolvers = RootQuery: { // ... } Todo: { // ... } ; const schema = ;
2. Provide the schema to React components:
;; ;; const store = ; ;
3. Connect components to render data:
@TodoList
API
<Provider store schema>
connect({[mapQueryToProps], [mapDispatchToProps]})
Contributing
We will be using this in production at AppHub! Check out the issues for some fun things to do, or email jobs@apphub.io if you love developer tools and want to work on this stuff full-time!