reduceless-connect v0.0.5

Reduceless-connect

Simple abstraction over Redux to make state management easy. You can change redux state for ui without creating constants and actions, just see examples.

Based on reduceless

Basic example:

For start we will create simple reducer file as you doing with redux. You already know how to do it:

const initialState = {
  settings: {
    showExamplePopup: false,
  }
}
export default function app(state, action) { }

After this we can use new "connect" from "reduceless-connect": This example for change "test" variable in reducer "app" without constants and actions. Simple?

import { connect } from 'reduceless-connect';
import * as actionCreators from 'redux/modules'; // https://github.com/erikras/ducks-modular-redux

@connect(
  ['app'], // working as 'state => state.app' in @connect react-redux.
  { ...actionCreators.app }, // working as 'dispatch => bindActionCreators({ ...actionCreators.app }, dispatch)' in @connect react-redux
  [{ setAppSettings: 'app.settings' }], // new method for change app.settings redux state
)
export default class TestComponent extends Component {
  static propTypes = {
    setAppSettings: PropTypes.func,
    settings: PropTypes.object,
    data: PropTypes.array,
  };
  render() {
    const { settings, setAppSettings, data } = this.props;

    return (
      <section>
        <button onClick={() => setAppSettings({ showExamplePopup: true })}>
          test
        </button>
        { settings.showExamplePopup && <div>showExamplePopup === true</div> }
      </section>
    );
  }
}

Multiple selector and setReduxState example:

With this example we can change "settings" in "categories" reducer and "settings" in app reducer without constants and actions.

@connect(
  ['app', 'user', 'categories'], // working as 'state => ({ ...state.app, ...state.user, ...state.categories })' in @connect react-redux
  { ...actionCreators.app, ...actionCreators.posts }, // // working as 'dispatch => bindActionCreators({ ...actionCreators.app, ...actionCreators.posts }, dispatch)' in @connect react-redux in @connect react-redux
  [{
    setAppSettings: 'app.settings'
  }, {
    setCategoriesSettings: 'categories.settings'
  }],
)

setReduxState by path

Can i change array? Yes, can! See next example for more details:

<button onClick={() => setAppSettings('list.2' { qwe: true })}> // = app.settings.list[2].qwe = true

For object:

<button onClick={() => setAppSettings('example.a' { qwe: true })}> // = app.settings.example.a.qwe = true

Full example in "redux-easy-boilerplate":

See the repo "redux-easy-boilerplate", branch "reduceless-connect". Component "app/components/Containers/ReducelessExample"

Also you can:

Deep selector example

@connect(
  ['app.data.info', 'posts.example.test'], // working as 'state => ({ ...state.app.data.info, ...state.posts.example.test })' in @connect react-redux

Props in setReduxState method

@connect(
  ['app'], // working as 'state => state.app' in @connect react-redux
  { ...actionCreators.app }, // working as 'dispatch => bindActionCreators({ ...actionCreators.app }, dispatch)' in @connect react-redux
  [{ setAppSettings: props => `app.data.${props.index}` }],
)

How it intall?

Very simple, you need update your default code with redux. Jus add "wrapReducerWithSetGlobalState" in combine reducers:

import { wrapReducerWithSetGlobalState } from 'reduceless-connect';

const rootReducer = wrapReducerWithSetGlobalState(
  combineReducers({
    form: formReducer,
    app,
    user,
    users,
    posts,
    categories,
    questions,
    rules,
    quotes,
  })
);

And your simple reducer file:

export default function app(state = {
  settings: {
    test: false,
  },
}, action) {