React-Redux将数据转换为道具

Posted 2021-04-06

我正在实现一个任务应用程序，我有两个视图来渲染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()