Installation
You can install phoenix-to-redux with NPM or Yarn
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 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;