1)我有WrapperComponent行：
export default function (props) {
const style = {position: "relative"};
const lines = props.lines;
return (
<div className='wrapper' style={style}>
{lines.map(line => (
<Line key={line.get("id")} {...line.toObject()} />
))}
<Board />
</div>
);
}
2)它连接到WrapperContainer
import Wrapper from '../components/WrapperComponent';
export default connect(
function mapStateToProps(state) {
return {
lines: state.lines.map(line => {
return line.set("board",{
width: state.board.get("width"),height: state.board.get("height")
});
})
};
},function mapDispatchToProps(dispatch) {
return {};
}
)(Wrapper);
3)然后有addLine动作
export function addLine(type) {
return {
type: types.ADD_LINE,payload: {
id: 3,top: 0,left: 0,diffX: 0,diffY: 0,type: type,board: {
width: 0,height: 0
},active: false
}
};
}
4)与LinesReducer对话
export default function LinesReducer(state = initialState,action) {
switch (action.type) {
case types.ADD_LINE:
return state.push(
Map(action.payload)
);
default:
return state;
}
}
5)这样WrapperContainer可以监听状态的变化并重新渲染线条
export default connect(
function mapStateToProps(state) {
return {
lines: state.lines.map(line => {
return line.set("board",function mapDispatchToProps(dispatch) {
return {};
}
)(Wrapper);
现在我的问题是：
我在哪里提出有关addLine操作的逻辑？
当我创建一行时,我想设置它的ID并且我想将其宽度设置为与另一个组件的宽度/高度相同.
我想这些行动应该只将信息从一个地方转移到另一个地方.
然后我在想……也许逻辑应该存在于LinesReducer中.但是Lines reducer无法访问应用程序的全局状态,所以我不知道新行的宽度/高度应该是多少.
然后是WrapperContainer.容器具有关于所有应用程序的状态的信息,因此如果没有设置并且更新它们的宽度/高度和其他信息,则循环每一行并设置ID似乎是合理的.
但这对我来说似乎不对.我正在考虑一个可以收集有关应用程序全局状态信息的地方,然后它会根据该信息添加新行,而其他任何东西都不会再触及该行.除了另一个动作.
这是正确的方法吗？我实际上想要在另一个组件的高度/宽度发生变化时更改线宽/高度,这样容器对我来说最有意义.
编辑：
也许：
1)在实际创建行时设置ID(我只是不知道已经有多少行,所以我真的不知道应该设置什么ID)
2)在将行传递给props时设置容器中的宽度/高度(但如果我最终想要在另一个容器中渲染行,我将不得不在那里复制代码,除非我创建一些处理将行传递给组件的“全局”函数容器中的道具)
解决方法
也就是说,你必须把这种类型的逻辑放在那里称为动作创建者,这实际上是你的addLine函数.
Action creators are exactly that—functions that create actions. It’s easy to conflate the terms “action” and “action creator,” so do your best to use the proper term.
Action creators can also be asynchronous and have side-effects.
在docs了解更多信息
动作创建者可以通过添加一些像redux-thunk这样的中间件来了解您当前的状态：
Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action,or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.
