当前位置：首页 > news >正文

对redux的理解

news 来源：原创 2024/5/15 14:40:43

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 的名称。其他属性可以自由设置。