> For the complete documentation index, see [llms.txt](https://trixtateam.gitbook.io/phoenix-to-redux/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://trixtateam.gitbook.io/phoenix-to-redux/installation.md).

# Installation

You can install phoenix-to-redux with [NPM](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/)

{% hint style="warning" %}
Using [Yarn Package Manager](https://yarnpkg.com/) is recommended over npm.
{% endhint %}

{% tabs %}
{% tab title="Yarn" %}

```javascript
yarn add @trixtateam/phoenix-to-redux
```

{% endtab %}

{% tab title="Npm" %}

```javascript
npm i @trixtateam/phoenix-to-redux
```

{% endtab %}
{% endtabs %}

### 1. Setup Phoenix Reducer

Include the phoenix reducer into your combined reducer 

```typescript
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](https://redux-toolkit.js.org/api/configureStore), for more info on setting up your store.

{% hint style="info" %}
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.
{% endhint %}

```typescript
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

{% hint style="info" %}
Below is just quick simple React App example
{% endhint %}

```jsx
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;

```