# Methodes

## constructor({ns:String, intialState:Object}) <a href="#constructor" id="constructor"></a>

```javascript
  /**
   * Create an RxStore instance
   * @param {Object} opts
   * @param {String} opts.ns The namespace of the store. Debuggin purpose. Default: 'rxStore'
   * @param {Object} opts.initialState Initial state of the store. Default: {}
   * 
   * @returns {RxStore} A new RxStore instance
   */
   constructor({ ns = 'rxStore', initialState = {} } = {})
```

### Example

*todo.store.js*

```javascript
import RxStore from '@zazapeta/rx-react-store';

const ns = 'Todo';
const initialState = {
  todos: []
};

const todoStore = new RxStore({ ns, initialState });

export default todoStore;
```

## *async* dispatch(reducer:Function, ...rest) <a href="#dispatch" id="dispatch"></a>

```javascript
  /**
   * Async Method
   * Dispatch a reducer thought the store. This the unique manner to modify the store.
   * @param {Function(Object,...rest)} action The reducer to be dispatched, that will modify the store.
   * Action got the state of the store as first arguments and 'rest' next.
   * @param {*} rest Rest of arguments passed to middlewares and to the action.
   */
   async dispatch(reducer = (state) => state, ...rest)
```

Define dispatchers in a dedicated file. Just import `todoStore` and have access to the `dispatch` method to update all connected component.

*todo.dispatchers.js*

```javascript
import todoStore from './todo.store.js';

export async function handleRemoveTodo(todo){
  return todoStore.dispatch((state) => ({
    ...state, 
    todos: state.todos.filter((t) => t.id !== todo.id)
  }));
}
```

## createDispatcher(reducer:Function): Function <a href="#createdispatcher" id="createdispatcher"></a>

`RxStore` provide `createDispatcher` method **to avoid repetitive code**.

```javascript
  createDispatcher(reducer) {
    return (...args) => this.dispatch(reducer, ...args);
  }
```

Define `reducers` in a dedicated file.

*todo.reducers.js*

```javascript
export function addTodo(state, todo){
  return {
    ...state,
    todos: state.todos.concat(todo)
  };
}
```

*todo.container.jsx*

```javascript
import todoStore from './todo.store.js';
import { addTodo } from './todo.reducers.js';
let handleAddTodo = todoStore.createDispatcher(addTodo);

/* Equivalent to :
function handleTodo(todo){
  return todoStore.dispatch(addTodo, todo);
}
*/
...

onClick={() => handleAddTodo(todo)}
```

## createDispatchers(reducersMap:Object{String,Function}):Object{String, Function} <a href="#createdispatchers" id="createdispatchers"></a>

`RxStore` provide `createDispatchers` method **to avoid repetitive code**.

```javascript
  createDispatchers(reducers = {}) {
    let dispatchers = {};
    Object.keys(reducers).forEach(
      (reducer) =>
        (dispatchers[reducer] = this.createDispatcher(reducers[reducer])),
    );
    return dispatchers;
  }
```

Define `reducers` in a dedicated file.

*todo.reducers.js*

```javascript
export function addTodo(state, todo){
  return {
    ...state,
    todos: state.todos.concat(todo)
  };
}
```

*todo.container.jsx*

```javascript
import todoStore from './todo.store.js';
import * as reducers from './todo.reducers.js';
let dispatchers = todoStore.createDispatchers(reducers);

...

onClick={() => dispatchers.addTodo(todo)}
```

## connect(mapStateToProps:Function(state, props)->Object)(BaseComponent:Component):Component <a href="#connect" id="connect"></a>

`connect` is a High Order Component (react-redux.connect). It's create a component that listen for changes comming from the given store.

> TIPS: To integrate RxStore with another view library, you may override `connect`

*todo.container.jsx*

```javascript
import todoStore from './todo.store.js';

function TodoContainer({todos}){
...
}

function mapStateToProps({ todos }, props) {
  // Work very well with 'reselect'.
  let _todos = todos.sort((t1, t2) => t1.id < t2.id);

  return { todos: _todos };
}

export default todoStore.connect(mapStateToProps)(TodoContainer);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zazapeta.gitbook.io/rx-react-store/api/methods.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.