redux-in-place

    0.0.9 • Public • Published

    redux-in-place

    A react/redux library to manage and organize redux's store attributes.

    Motivation

    Every application tends to grow and one of many difficulties is to keep your code clean and organized; so it happens with Redux's store, as the store grows many attributes appears and it become hard to track to which domain or page they belong. Redux-in-place proposes to organize the store's attribute tree in a simple and understandable way.

    How it works

    Let's suppose that in the store we have an user that is authenticated who wants to buy some books. Store's properties would look like something like this.

    { 
      username: 'Foo',
      registrationDate: '2016-12-10',
      bookName: 'Last wish',
      author: 'Andrzej Sapkowski'
    }

    When those attributes grow will become harder and harder to assert to which domain those properties come from. With redux-in-place we could do:

    { 
      User: {
        username: 'Foo',
        registrationDate: '2016-12-10'
      },
      Book: {
        name: 'Last wish',
        author: 'Andrzej Sapkowski' 
      }
    }

    It becomes easier to read and to organize store's properties.

    How to use

    First of all

    npm install redux-in-place --save

    Then you user your redux like you normally would but instead of exporting it, you should connect your reduce with redux-in-place like this:

    import { placeReducer } from 'redux-in-place';
     
    export const UPDATE_INFORMATION = 'UPDATE_INFORMATION';
     
    const initialState = {
      name: '',
      author: '',
    };
     
    const reducer = (state = initialState, action) => ({
      [UPDATE_INFORMATION]: {
        ...state,
        name: action.name,
        author: action.author,
      }
    }[action.type] || state);
     
    export default placeReducer('Book', reducer);

    Then in your React component:

    import { connectReducer } from 'redux-in-place';
    import { connect } from 'react-redux';
     
    import bookReducer from './bookReducer';
    //...code ommited for sake of simplicity
    const ConnectedBook = connect(
      ({ Book }) => ({
        author: Book.author,
        name: Book.name
      })
    )(BookComponent);
     
    export default connectReducer(bookReducer)(ConnectedBook);

    That's it, simple like that, now all your reducer properties will be on 'Book'.

    Thanks

    @AntonioSchmidt - For all the help with this lib, the effort to make it open-source, document and help me with it testing and development. My sincere thank you!

    License

    Copyright (c) 2016 Gabriel Reitz Giannattasio Licensed under the MIT license.

    Keywords

    none

    Install

    npm i redux-in-place

    DownloadsWeekly Downloads

    1

    Version

    0.0.9

    License

    none

    Last publish

    Collaborators

    • avatar