Redux実践(1)

reduxの新しい試み

normalizr

redux-actions

redux-persist

redux-thunk

reselect

いくつかの思考

reducersは、カスタムデータモデル(Model)およびインタフェースステータス(UI)

のセットを維持する.

Model normalizr支援設計データモデル

を使用

UIの一般的なネットワーク状態等の他の

connectComponent
connectに中間層を作成すると、デフォルトパラメータの統一構成が容易になります.

import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import actions from "./actions";

const options = {
    withRef: true
};
const defaultMapStateToProps = (state, props) => ({});
const defaultMapDispatchToProps = (dispatch, props) => ({
    actions: bindActionCreators(actions, dispatch)
});
const defaultMergeProps = (stateProps, dispatchProps, ownProps) => (
    Object.assign({}, ownProps, stateProps, dispatchProps)
);

const getMapStateToProps = (makeSelector) => () => (state, props) => ({
    data: makeSelector()(state, props),
});

export default ({makeSelector, mapStateToProps, mapDispatchToProps, mergeProps}) => (
    connect(
        mapStateToProps || makeSelector && getMapStateToProps(makeSelector) || defaultMapStateToProps,
        mapDispatchToProps || defaultMapDispatchToProps,
        mergeProps || defaultMergeProps,
        options
    )
);

reselect(セレクタ)

コンポーネントが更新されるたびにtodosが再計算されます.state treeが非常に大きい場合、または計算量が非常に大きい場合、更新のたびに再計算するとパフォーマンスに問題が発生する可能性があります.reselectは、これらの不要な再計算を省くことができます.

reselectは、記憶可能なselectorを作成するためのcreateSelector関数を提供する.createSelectorはinput-selectors配列と変換関数をパラメータとして受信します.state treeの変更がinput-selector値の変化を引き起こす場合、selectorは変換関数を呼び出し、input-selectorsをパラメータとして入力し、結果を返します.input-selectorsの値が前回と同じ場合、変換関数を呼び出すことなく、前回計算したデータが直接返されます.

const makeSelector = () => createSelector(
    [
        (state, props) => {
            let {home, Goods, Users} = state;
            return denormalize(home.list, GoodsList, {Goods, Users})
        }
    ],
    (data) => data
);

normalizr
なぜ設計モードを使用してバックグラウンドとフロントが対応していると仮定し、フロントは自分のデータモデルを維持し、データアーキテクチャが複雑な場合、バックグラウンドデータが理想的ではない影響を与えるのか.
方法

normalize

denormalize

schema

Array

Entity

Object

Union

Values