技术原理

React 学习心得_28(在React中应用Redux - 4)

介绍

上一篇中大家早已将AddTodo创建好而且确定Reducer会造成新的state,接下去要创建将Todo物品显示信息在UI的部件,因为TodoList只承担3D渲染界面而且接受到的数据信息均是来源于props,因此它是归属于Presentational Component,而VisibleTodoList是要开展挑选Filter的逻辑性解决,因此分类为Container Component。

VisibleTodoList.js

意谓mapDispatchToProps会在state发生改变(增加新的todo物品)时候全自动启用,将增加的todos Array带到getVisibleTodos function中开展Filter的判断推理,以Filter的特性决策显示信息这些Todo物品,而挑选之后的todos会通过connect传送给TodoList开展UI选染。

https://ithelp.ithome.com.tw/upload/images/20200516/20124767wpFTfep14T.png

import { connect } from "react-redux";
import { toggleTodo } from "../Store/Action/Action";
import TodoList from "../Presentational Component/TodoList";

const getVisibleTodos = (todos, filter) => {
    switch (filter) {
      case 'SHOW_ALL':
        return todos
      case 'SHOW_COMPLETED':
        return todos.filter(t => t.completed)
      case 'SHOW_ACTIVE':
        return todos.filter(t => !t.completed)

    default:
            break;
    }
};

//当State升级后全自动启用
const mapStateToProps = (state) => {
    /*将State中的todo传到getVisibleTodos function开展挑选Filter判断推理,
    return分辨結果给todos中*/
    return {
      todos: getVisibleTodos(state.todos, state.visibilityFilter)
    }
};

//将onTodoClick传送给Presentational Components做为callback
const mapDispatchToProps = (dispatch) => {
    return {
      onTodoClick: (id) => {
        dispatch(toggleTodo(id))
      }
    }
}
//挑选之后的todos与callback意谓connect传送给TodoList
const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatchToProps
)(TodoList)
export default VisibleTodoList

TodoList.js

从VisibleTodoList开展判断推理后,将挑选玩的Todos与callback function意谓connect传送给TodoList,TodoList再将接到的props开展UI选染。

import React from "react";
import Todo from "./Todo";

const TodoList = (props) => {
    console.log(props) //意谓console查询传送到TodoList的props內容
    return(
        <ul>
            {
                props.todos.map(todo => 
                    <Todo 
                        key={todo.id}
                        {...todo}
                        onClick={()=> props.onTodoClick(todo.id)}
                    />
                )
            }
        </ul>
    )
};

export default TodoList;

TodoList的props是挑选之后的Todos与onClick callback function
https://ithelp.ithome.com.tw/upload/images/20200516/20124767kySANK1Q9A.png

Todo.js

import React from "react";

const Todo = (props) => {
    return(
        <li
            onClick={props.onClick}
            style={{
                textDecoration: props.completed ? 'line-through' : 'none'
            }}
        >
            {props.text}
        </li>
    )
};

export default Todo;

参考文献 :
从Redux 的创作者学习培训它

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
人工智能概念股 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录