phoenix-to-redux
  • Overview
  • Installation
  • Quick Start
  • Reference
    • API Reference
      • Socket
        • Methods
          • disconnectPhoenix
          • connectPhoenix
        • Events
          • SOCKET_ERROR
          • SOCKET_OPEN
          • SOCKET_DISCONNECT
          • SOCKET_CLOSE
          • SOCKET_CONNECT
      • Channel
        • Methods
          • leavePhoenixChannel
          • leavePhoenixChannelEvents
          • leavePhoenixChannelEvent
          • getPhoenixChannel
          • pushPhoenixChannel
        • Events
          • CHANNEL_ERROR
          • CHANNEL_LEAVE
          • CHANNEL_JOIN_ERROR
          • CHANNEL_JOIN
          • CHANNEL_TIMEOUT
          • CHANNEL_PUSH_ERROR
          • CHANNEL_CLOSE
Powered by GitBook

Copyright (c) 2020 Trixta Inc

On this page
  • 1. Setup Phoenix Reducer
  • 2. Setup Phoenix Middleware
  • 3. Dispatch a connectPhoenix event

Was this helpful?

Export as PDF

Installation

PreviousOverviewNextQuick Start

Last updated 2 years ago

Was this helpful?

You can install phoenix-to-redux with or

Using is recommended over npm.

yarn add @trixtateam/phoenix-to-redux
npm i @trixtateam/phoenix-to-redux

1. Setup Phoenix Reducer

Include the phoenix reducer into your combined reducer

import { combineReducers } from 'redux';
import { phoenixReducer } from '@trixtateam/phoenix-to-redux';

export default function createReducer() {
  const rootReducer = combineReducers({
    phoenix: phoenixReducer,
  });
  return rootReducer;
}

2. Setup Phoenix Middleware

Example below for including the phoenix-to-redux middleware into your application. see , for more info on setting up your store.

Please note the sagaMiddleware used below is not required, this is just what is being use in the example below to intercept all redux actions.

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(initialState = {}) {
  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;
}

3. Dispatch a connectPhoenix event

Below is just quick simple React App example

import * as React from 'react';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import {
  connectPhoenix
} from '@trixtateam/phoenix-to-redux';
import Providers from './Providers';
import Routes from './Routes';


export function App() {
const dispatch = useDispatch();
useEffect(() => {
    dispatch(connectPhoenix({ domainUrl:'localhost:4000', params: {} }))
  }, [dispatch]);
  
return (<Providers>
      <Routes />
    </Providers>)

}

export default App;
NPM
Yarn
Yarn Package Manager
redux docs