对redux的理解

redux文件中:

redux文件中,需要作两件事:
1、由dispatch来的事件找到对应的action。
2、如何将事件中的参数映射到redux的store的state中去。

redux的store有state和actions。


定义actions:
下面将 hideDialog的dispatch 和type为HIDE_DIALOG的Action关联起来。
也就是如果向store dispatch一个hideDialog的消息,
则由store中的HIDE_DIALOG Action 来处理。
则store中type为HIDE_DIALOG
export const actions = {
    hideDialog: dispatch => {
        dispatch({
            type: HIDE_DIALOG,
        });
    }
};

初始化redux的store中的state:
下面的dialog是state中的一项。
const INITIAL = {
    dialog: {
        title: '',
        message: '',
        button: [],
        show: false
    }
};


//收到action后,如何用action参数中的值去改变redux的state的值.
也就是如何将随action而来的值映射到store的state中。
export default (state = INITIAL, action) => {
    switch (action.type) {
    case SHOW_DIALOG:
            return Object.assign({}, state, {
                dialog: {
                    title: action.title,
                    message: action.message,
                    button: action.button || [],
                    show: true
                }
            });
        case HIDE_DIALOG:
            return Object.assign({}, state, {
                dialog: {
                    title: '',
                    message: '',
                    button: [],
                    show: false
                }
            });


        default:
            return state;
    }
};



在component中:

/*
component通过下面的方法接收消息。
component收到消息后,component中的componetProperty属性将被
消息改变。

下面的方法将component的componetProperty属性映射到redux的state.app.dialog。
下面方法的主语是redux。
map redux 的 state to component 的 props

通过将redux的state映射到component的属性,
改变redux的state,就相当于component收到了消息。
redux通过改变自己的state向componet发送消息。
redux的state的改变就相当于改变了component的props。
component 通过 自己的props被改过,接收到消息。

*/
const mapStateToProps = (state) => ({
    componetProperty: state.app.dialog
});

/*
component通过下面的方法向外发布消息。
也就是component通过redux向外发布消息。
所发布消息的type是:Category.actions.addCategory
component通过调用自己 componentProperty(name) 方法,
就发布了此消息。

下面方法的主语是redux。
map redux 的 dispatch to 当前componet 的Props。

=>的左侧:
componentProperty: (name) 
是 component的Props

=>的右侧:
Category.actions.addCategory(dispatch)({ name })
是Redux中定义的action。


*/
const mapDispatchToProps = (dispatch, ownProps) => ({
    componentProperty: (name) => Category.actions.addCategory(dispatch)({ name })


redux由 state 和 action组成。 
Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。其他属性可以自由设置。
展开阅读全文

没有更多推荐了,返回首页