redux-update

Redux-update

Play with Immutable.js state in a react-redux application.

$3

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(



,
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 (


)
}

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)

- 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
});
}
`

$3

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






,
document.getElementById("root")
);
``