Close Menu

rxducks

Introduction

Welcome to the documentation for RXDucks!

What is RXDucks?

RXDucks is a library that combines the power of Redux and RxJS, providing a state management solution with reactive programming capabilities. It simplifies the handling of side-effects and asynchronous operations through observables, making your application more efficient and manageable.

Installation

To start using RXDucks in your project, follow these steps:

  1. Open a terminal and navigate to your project directory.
  2. Run the following command to install RXDucks via NPM:
    3. npm install rxducks

Getting Started

Once you have RXDucks installed, import it into your project:

import { createStore } from 'rxducks';

Now, you can create a store and define your initial state and reducers:

const initialState = {
  counter: 0,
};

const incrementReducer = (state) => ({
  ...state,
  counter: state.counter + 1,
});

const store = createStore({
  initialState,
  reducers: {
    increment: incrementReducer,
  },
});

You have successfully set up the basic structure of your store.

Concepts

1. Actions

Actions are payloads of information that send data from your application to the store. They are the only source of information for the store, and they describe the type of update to be performed. In RXDucks, an action is represented by an observable.

import { action } from 'rxducks';

const increment = action('counter/increment');

2. Reducers

Reducers specify how the application’s state changes in response to actions. They are pure functions that take the previous state and an action as parameters, returning the new state. In RXDucks, reducers are combined using the combineReducers function.

import { combineReducers } from 'rxducks';

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'counter/increment':
      return state + 1;
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  counter: counterReducer,
});

3. Epics

Epics handle side-effects and asynchronous actions in RXDucks. They are functions that take an input stream of actions and return an output stream of actions. Epics are implemented using the power of RxJS observables.

import { epic, ofType } from 'rxducks';
import { delay, mapTo } from 'rxjs/operators';

const incrementAsyncEpic = epic((actions$) =>
  actions$.pipe(
    ofType('counter/incrementAsync'),
    delay(1000),
    mapTo(increment())
  )
);

4. Selectors

Selectors are functions that compute derived data based on the state. They allow efficient and memoized access to specific parts of the state. In RXDucks, selectors can be created using the createSelector function.

import { createSelector } from 'rxducks';

const selectCounter = (state) => state.counter;

const selectCounterDoubled = createSelector(
  selectCounter,
  (counter) => counter * 2
);

Usage

1. Dispatching Actions

To dispatch an action, you can use the dispatch method provided by the store:

store.dispatch(increment());

2. Subscribing to State

To listen for changes in the state, you can subscribe to the store:

store.subscribe((state) => {
  console.log('State:', state);
});

3. Combining RXDucks with React

If you are using React, you can integrate RXDucks with your components using the rxredux-react package:

  1. Install rxredux-react via NPM:
    2. npm install rxdux-react
  2. Import the necessary components:
    3. import { Provider, connect } from 'rxdux-react';
import { useDispatch, useSelector } from 'rxdux-react';
  3. Wrap your application with the Provider component:
    4. import { Provider } from 'rxdux-react';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
  4. Connect your component to the store using the connect function:
    5. import { connect } from 'rxdux-react';

const Counter = ({ counter, increment }) => (
  <div>
    <p>Counter: {counter}</p>
    <button onClick={increment}>Increment</button>
  </div>
);

const mapStateToProps = (state) => ({
  counter: state.counter,
});

const mapDispatchToProps = {
  increment,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Conclusion

Congratulations! You have learned the basics of RXDucks and how to use it in your projects. Start exploring more advanced features like middlewares and custom epics to further enhance the functionality of your application.