Installation

You can install phoenix-to-redux with NPM or Yarn

Using Yarn Package Manager is recommended over npm.

Yarn

yarn add @trixtateam/phoenix-to-redux

Npm

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 redux docs, 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;