trixta-js 4.10.1
Install from the command line:
Learn more about npm packages
$ npm install @trixtateam/trixta-js@4.10.1
Install via package.json:
"@trixtateam/trixta-js": "4.10.1"
About this version
JS
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
npm i @trixtateam/trixta-js
or yarn - whichever you prefer
yarn add @trixtateam/trixta-js
/**
* Combine all reducers in this file and export the combined reducers.
*/
import { combineReducers } from '@reduxjs/toolkit';
import { phoenixReducer } from '@trixta/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 '@trixta/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 '@trixta/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 '@trixta/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 { updateTrixtaRoles } from '@trixtateam/trixta-js';
import { socketActionTypes,connectPhoenix } from '@trixta/phoenix-to-redux';
/**
* After the socket is connected,
* @param {*} params
*/
export function* socketConnectedSaga() {
// handle connection response
const currentSession = yield select(makeSelectCurrentSession());
// save roles in reducer or somewhere to passs to trixta-js action
const roles = currentSession.roles.map((role) => ({
name: role,
logPresence: false,
}));
if (roles) {
yield put(updateTrixtaRoles({ roles }));
}
}
export function* connectPhoenixSaga() {
yield put(connectPhoenix({ domainUrl: 'localhost:4000', params : { }));
}
export default function* rootSaga() {
yield call(connectPhoenixSaga);
yield fork(setupTrixtaSaga);
yield takeEvery(socketActionTypes.SOCKET_OPEN, socketConnectedSaga);
}
This project is licensed under the MIT license, Copyright (c) 2020 Trixta Inc.
For more information see LICENSE.md
.