# redux-update-v1

> redux-immutable utilities

Latest version **0.0.1** (published 2019-12-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install redux-update-v1
pnpm add redux-update-v1
yarn add redux-update-v1
bun add redux-update-v1
```

## 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.1 |
| Published | 2019-12-06 |
| First published | 2019-12-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xiphap@qq.com |
| Maintainers | xiphap |
| Keywords | redux, immutable |

## Links

- npm: https://www.npmjs.com/package/redux-update-v1
- npm.io page: https://npm.io/package/redux-update-v1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2019-12-06

## README

## Redux-update

Play with [Immutable.js](https://facebook.github.io/immutable-js/) state in a react-redux application.

### Usage

Define a initialState and create a store

```
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Store } from "redux-update";


/**  Data-update-type reducers will be created according to the initialState  */
const initialState = {
  application: {
    name: "immutable-state-app"
  },
  user: {
    isLoggedIn: false,
    profile: undefined
  },
  data: {}
};

const options = {
    state: initialState,
    ...otherOptions
};

const appStore = new Store(options);

ReactDOM.render(
  <Provider store={appStore}>
    <User />
    <TodoList />
  </Provider>,
  document.getElementById("root")
);
```

> A Immutable.js state as well as [data-update-type] reducers according to the state would be inited.

Connect the componnet [Learn more about redux](https://github.com/reactjs/redux)

```
import { Store, connect } from "redux-update";

/** Set the [stateKeys] as args */
@connect("user", "data.todo")
class User extend React.Component{

    render() {
        // Get from redux state
        const profile = Store.get("user.profile");
        return (
            <div>
                {user.profile.name}
            </div>
        )
    }

    async updateData() {
        const newData = await fetch("fetchData");
        // Store.update() will dispatch a data-update-type action
        Store.update("user.profile", newData);
    }
}

@connect("data.todo")
class TodoList extend React.Component{
    render() {
        cosnt list = Store.get("data.todo.list") || [];
        return (
            ...
        )
    }
}
```

Component would re-render when the connect-state-value changed.

> At the situation above, component `TodoList` would not re-render unless `data.todo` had changed.

#### Handle the Immutable.js state

- connect(...values: Array<string | ConnectRestParams>)

- Store.update(keys: string, payload: any)

- Store.updateList(keys: string, type: "update" | "push" | "pop" | "unshift" | "shift", payload: any): void;

- Store.get<T>(keys: string): T | undefined

- Store.dispatch(action: StoreAction)

Update List value

```
function updateListData() {
    const list = [
        {
            id: "a1",
            data: "a1data"
        },
         {
            id: "a2",
            data: "a2data"
        },
        ...
    ];
    // update list in state
    Store.update("list.listdata", list);

    const new_a2 = {
        id: "a2",
        data: "new data",
        ...
    };

    // update value in `list` by id
    Store.updateList("list.listdata", "update", {
        key: "id",
        ...new_a2
    });
}
```

### Options

- state

- reducers

- reducerWhiteList

- middlewares

Create custom reducers. Configuring router reducer for example

```
import {
    LOCATION_CHANGE
} from "react-router-redux";
import createHistory from "history/createBrowserHistory";
import {
  ConnectedRouter,
  routerReducer,
  routerMiddleware,
  push
} from "react-router-redux";

const initialState = {
  application: {
    name: "immutable-state-app"
  },
  router: {
    "locationBeforeTransitions": null
  },
  user: {
    isLoggedIn: false,
    profile: undefined
  },
  data: {}
};

function routerReducer(state = Immutable.fromJS(initialState), action) {
    if (action.type === LOCATION_CHANGE) {
        return state.set("locationBeforeTransitions", action.payload);
    }
    return state;
}

/** Add the reducer on the `router` key */
const reducers = {
    router: routerReducer
};

const history = createHistory();
const middleware = routerMiddleware(history);

const options = {
    state: initialState,
    reducers: reducers,
    // Add "router" to whitelist that preventing create data-update type reducers
    reducerWhiteList: ["router"],
    // Apply our middleware for navigating
    middleware: [middleware]
};

const appStore = new Store(options);

ReactDOM.render(
  <Provider store={appStore}>
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={App} />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);
```

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