trixta-js 5.5.0
Install from the command line:
Learn more about npm packages
$ npm install @trixtateam/trixta-js@5.5.0
Install via package.json:
"@trixtateam/trixta-js": "5.5.0"
About this version
trixta-js a javascript library to help any organization, easily connect to a Trixta space, build front-end components for you application. It leverages phoenix-to-redux to communicate with Trixta and gives you a variety of tools / utilities to build react components.
Any orgranization using Trixta for their javascript application.
Install the package with npm or yarn
npm i @trixtateam/trixta-js @trixtateam/phoenix-to-redux or yarn - whichever you prefer
yarn add @trixtateam/trixta-js @trixtateam/phoenix-to-redux
/**
* Combine all reducers in this file and export the combined reducers.
*/
import { combineReducers } from '@reduxjs/toolkit';
import { phoenixReducer } from '@trixtateam/phoenix-to-redux';
import { trixtaReducer } from '@trixtateam/trixta-js';
export default function createReducer() {
const rootReducer = combineReducers({
trixta: trixtaReducer,
phoenix: phoenixReducer,
});
return rootReducer;
}See example to setup middleware
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import { createReducer } from './reducers';
export default function configureStore() {
const reduxSagaMonitorOptions = {};
// Makes redux connected to phoenix channels
const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
// Create the store with saga middleware
const middlewares = [sagaMiddleware,phoenixChannelMiddleWare];
const enhancers = [];
const store = configureStore({
reducer: createReducer(),
middleware: [
...getDefaultMiddleware({
thunk: false,
immutableCheck: {
ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
},
serializableCheck: false,
}),
...middlewares,
],
devTools:
/* istanbul ignore next line */
process.env.NODE_ENV !== 'production' ||
process.env.PUBLIC_URL.length > 0,
enhancers,
});
return store;
}import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import { setupTrixtaSaga } from '@trixtateam/trixta-js';
import createReducer from './reducers';
export default function configureStore() {
const reduxSagaMonitorOptions = {};
// Makes redux connected to phoenix channels
const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
const middlewares = [sagaMiddleware,phoenixChannelMiddleWare];
const enhancers = [];
const store = configureStore({
reducer: createReducer(),
middleware: [
...getDefaultMiddleware({
thunk: false,
immutableCheck: {
ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
},
serializableCheck: false,
}),
...middlewares,
],
devTools:
/* istanbul ignore next line */
process.env.NODE_ENV !== 'production' ||
process.env.PUBLIC_URL.length > 0,
enhancers,
});
sagaMiddleware.run(setupTrixtaSaga);
return store;
}import { put, select, takeLatest, takeEvery, fork } from 'redux-saga/effects';
import { setupTrixtaSaga } from '@trixtateam/trixta-js';
export default function* rootSaga() {
yield fork(setupTrixtaSaga);
}import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './rootSaga';
import createReducer from './reducers';
export default function configureStore() {
const reduxSagaMonitorOptions = {};
// Makes redux connected to phoenix channels
const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
const middlewares = [sagaMiddleware,phoenixChannelMiddleWare];
const enhancers = [];
const store = configureStore({
reducer: createReducer(),
middleware: [
...getDefaultMiddleware({
thunk: false,
immutableCheck: {
ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
},
serializableCheck: false,
}),
...middlewares,
],
devTools:
/* istanbul ignore next line */
process.env.NODE_ENV !== 'production' ||
process.env.PUBLIC_URL.length > 0,
enhancers,
});
sagaMiddleware.run(rootSaga);
return store;
}import { put, select, takeLatest, takeEvery, fork } from 'redux-saga/effects';
import { connectTrixta } from '@trixtateam/trixta-js';
export function* connectTrixtaSaga() {
yield put(connectTrixta({ space: 'localhost:4000'}));
}
export default function* rootSaga() {
yield fork(setupTrixtaSaga);
yield call(connectTrixtaSaga);
}import { put, select, takeLatest, takeEvery, fork } from 'redux-saga/effects';
import { connectTrixta } from '@trixtateam/trixta-js';
export function* connectTrixtaSaga() {
yield put(connectTrixta({ space: 'localhost:4000', params : { agentId: '[email protected]', token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c' }}));
}
export default function* rootSaga() {
yield fork(setupTrixtaSaga);
yield call(connectTrixtaSaga);
}This project is licensed under the MIT license, Copyright (c) 2020 Trixta Inc.
For more information see LICENSE.md.
