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

```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://trixtateam.gitbook.io/phoenix-to-redux/installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.