我正在实现一个任务应用程序,我有两个视图来渲染Tasks
和Items
,另一个我根据任务状态渲染多个列表作为看板。
我的减速机:
export const rootReducer = Redux.combineReducers({
Tasks: TasksReducer,
itemsAreLoading: itemsAreLoadingReducer
});
const TasksReducer = (state , action ) => {
if (typeof state == "undefined") {
console.log('state undefined');
return null;
}
switch (action.type) {
case TasksTypes.Tasks_GET:
return action.Tasks;
default:
console.log(state);
return state;
}
}
export class TasksApp extends React.Component {
constructor(props) {
super(props);
}
render() {
const {tasks} = this.props;
return (<div>
<ItemsView Tasks={tasks}/>
<BoardView Lanes=[/* tasks tranfromed into mutliple list based on their status*/]/>
</div>);
}
}
const mapStateToProps = (state) => {
return {
tasks: state.Tasks
};
};
我的问题是将第二个视图的数据转换为具有不同数据表示的位置。
这里的主要问题是你不要在你的课堂上开除任何动作,我也没有看到任何动作。首先,你必须触发一个动作,然后用类型和有效载荷调度它,其次,正如David Tyron写的那样,语法在这一行中有点偏离:
const { tasks } = this.props;
最后一个小注释,你可以在mapStateToProps函数中做一些破坏:
const mapStateToProps = ({ Tasks }) => {
return { Tasks };
};
然后像const { Tasks } = this.props;
那样得到它
我认为,改变你的任务道具的最佳做法是触发另一个动作,从你的任务道具创建一个新的道具,如:
export const transformData = tasks => {
return dispatch => {
//Do the transformations here
dispatch {
type: TRANSFORM_DATA,
payload: transformed_tasks
}
}
}
然后用减速机捕捉它。
而恕我直言,这个行动的最佳地方是componentDidMount()