redux-update

Redux-update

Play with 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

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(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")
);