# react-remote-redux

> Easily manage state by reducing redux state on the server.

Latest version **0.0.11** (published 2018-11-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-remote-redux
pnpm add react-remote-redux
yarn add react-remote-redux
bun add react-remote-redux
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2018-11-28 |
| First published | 2018-08-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 202.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Severin Ibarluzea |
| Maintainers | seveibar |

## Links

- npm: https://www.npmjs.com/package/react-remote-redux
- npm.io page: https://npm.io/package/react-remote-redux

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.4.2
- [redux](https://npm.io/package/redux.md) ^4.0.0
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.7
- [remote-redux](https://npm.io/package/remote-redux.md) ^0.0.7

## Recent versions

- 0.0.11 (latest) — 2018-11-28
- 0.0.10 — 2018-08-24
- 0.0.9 — 2018-08-21
- 0.0.8 — 2018-08-21
- 0.0.7 — 2018-08-21
- 0.0.6 — 2018-08-21
- 0.0.5 — 2018-08-20
- 0.0.4 — 2018-08-20
- 0.0.3 — 2018-08-20
- 0.0.2 — 2018-08-20
- 0.0.1 — 2018-08-20

## README

# React Remote Redux

Remote Redux bindings for React with reasonable defaults.

ReactRemoteRedux provides a [redux](https://github.com/reactjs/redux) store via [react-redux](https://github.com/reactjs/react-redux).
It uses [remote redux](https://github.com/seveibar/remote-redux) behind the scenes to compute the next state.

## Installation and Usage

```
npm install react-remote-redux
```

```javascript
import ReactRemoteRedux from "react-remote-redux"

export default () => (
  // Works similarly to <Provider /> from react-redux
  <ReactRemoteRedux endpoint="/api/reduce">
    <App />
  </ReactRemoteRedux>
)
```

Your App can now access the redux store normally, e.g. with the [react-redux](https://github.com/reactjs/react-redux) `connect` method.

By default, the endpoint `/api/reduce` will be called with a POST request whenever an action matches the
condition `action.remote || action.type.startsWith('REMOTE_')`. The POST request will contain two parameters
`state` and `action`. The `state` is the complete redux store state on the client ([see this note on efficiency](#efficiency)). The POST request should return a JSON object with a key `newState` in it's body containing the next state of the application.

## Props

| Prop               | Description                                                                                     | Example                                                        |
| ------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| endpoint           | Server endpoint to send POST request to.                                                        | "/api/reduce"                                                  |
| localReducer       | `Optional` A reducer reducer of the form `(state, action) => state`                             |                                                                |
| initialState       | `Optional` The default redux store state                                                        | `null`                                                         |
| initialAction      | `Optional` An initial action to be executed, e.g. to perform the initial page load              | `{ type: 'REMOTE_LOAD_PAGE', page: window.location.pathname }` |
| detectRemoteAction | `Optional` Method used to detect if the action should be sent to the server (remote reducer)    | `action => action.remote || action.type.startsWith('REMOTE_')` |
| makeRequest        | `Optional` Method to perform request to server of type `(state,action,responseCallback) => any` |                                                                |
| applyResponse      | `Optional` Method to apply the response from the server to create the new state                 | `(response) => response.newState`                              |
| middlewares        | `Optional` Redux middlewares                                                                    | []                                                             |
| useReduxDevTools   | `Optional` Integrate with redux dev tools extension                                             | `false`                                                        |

## Efficiency

If you're dealing with enough state (e.g. your state is hundreds of KB), you should intelligently
encode it before sending it to the server. There are a lot of ways to do this, you can have the server
remember the state of the client and have the client send up only mutations on the state, you can configure
actions to only send necessary state, and/or you can have the server only return the mutations of the
state rather than the entire state. To do these, look at overriding the `applyResponse` and `makeRequest`
props.

---
_Source: https://npm.io/package/react-remote-redux · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._