关于redux的问题state.visibilityFilter这种用法不会

import React, { Component, PropTypes } from 'react'

import Todo from './Todo'



/*



    (todo, index) =>

       
            key={index}

            OnClick={() => this.props.onTodoClick(index)} />



    参数todo，index

   

    OnClick={return this.props.onTodoClick(index)}



    var f = () => 5;

    // 等同于

    var f = function () { return 5 };



    var sum = (num1, num2) => num1 + num2;

    // 等同于

    var sum = function(num1, num2) {

        return num1 + num2;

    };



    由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。



    var getTempItem = id => ({ id: id, name: "Temp" });



*/





export default class TodoList extends Component {

    /*

        function ListItem(props) {

            // Correct 正确的 ! There is no need to specify the key here:

            return

{props.value}

;

        }



        const listItems = numbers.map((number) =>

        // Correct! Key should be specified inside the array.

           
                value={number} />

        );

     */



    /*



        数据格式

        {

            text: action.text1,

            completed: false

        },

        {

            text: action.text2,

            completed: false

        },

        {

            text: action.text3,

            completed: false

        }



     */



    /*

        遍历父元素的 this.props.todos

     */



    /*





     */

    render() {

        return (

           

                {

                    this.props.todos.map((todo, index) =>

                       
                              key={index}

                        />)

                }

           

        )

    }

}

import React, { Component } from 'react'

import PropTypes from 'prop-types'

/*

    text-decoration:underline;     下划线

    text-decoration:overline;      顶划线

    text-decoration:line-through;  删除线

    text-decoration:blink;         闪烁



    -moz-text-decoration-line: overline; // 针对 Firefox 的代码

 */

export default class Todo extends Component {

    render() {

        return (

           
                line-through' : 'none',

                    cursor: this.props.completed ? 'default' : 'pointer'

                }}>

                {this.props.text}

           

        )

    }

}

{this.props.text}

import React, { Component, PropTypes } from 'react'

import { connect } from 'react-redux'

import { addTodo, VisibilityFilters } from '../actions'

import AddTodo from '../components/AddTodo'

import TodoList from '../components/TodoList'



/*

    let [x, y] = [1, 2, 3];

    x // 1

    y // 2



    let [a, [b], d] = [1, [2, 3], 4];

    a // 1

    d // 4

    b // 2



    let { foo, bar } = { foo: "#", bar: "bbb" };

    foo // "#"

    bar // "bbb"

 */



/*

    Store 就是把它们联系到一起的对象。Store 有以下职责：



    维持应用的 state；

    提供 getState() 方法获取 state；

    提供 dispatch(action) 方法更新 state；

    通过 subscribe(listener) 注册监听器;

    通过 subscribe(listener) 返回的函数注销监听器。



    // Dispatch some actions

    store.dispatch(addTodo('Learn about actions'))

    store.dispatch(addTodo('Learn about reducers'))

    store.dispatch(addTodo('Learn about store'))

 */



// 点击按钮 发出了增加 text 的 action 请求



class App extends Component {

    // todos={visibleTodos} 采集 visibleTodos 数据

    render() {



        const { dispatch, visibleTodos } = this.props

        return (

           

        )

    }

}





/*

    {

      visibilityFilter: 'SHOW_ALL',

      todos: [

        {

          text: 'Consider using Redux',

          completed: true,

        },

        {

          text: 'Keep all state in a single tree',

          completed: false

        }

      ]

    }

 */





/*

    使用 todos 方法，返回 state 数据，构建数据完毕

    {

        visibilityFilter: 'SHOW_ALL',

        visibleTodos: [

            {



            }

        ]

    }

 */



// actions.js 中的 VisibilityFilters

/*

    selectTodos(state.todos, state.visibilityFilter)



    state.visibilityFilter 等于 'SHOW_ALL'



    VisibilityFilters.SHOW_ALL 的值等于 'SHOW_ALL'



    statv.todos 返回空值

 */

function selectTodos(todos, filter) {

    switch (filter) {

        case VisibilityFilters.SHOW_ALL:

            return todos

    }

}



/*

    {

        visibilityFilter: SHOW_ALL,

        visibleTodos: [

            selectTodos(state.todos, state.visibilityFilter)

        ]

    }



 */



// visibilityFilter 未知



// Which props do we want to inject, given the global state?



/*

    visibilityFilter: state.visibilityFilter



    state 调用了 reducers 中方法 visibilityFilter 返回默认值为 'SHOW_ALL'



    第一个 visibilityFilter 为 'SHOW_ALL'

 */

function select(state) {

    return {

        visibleTodos: selectTodos(state.todos, state.visibilityFilter),

        visibilityFilter: state.visibilityFilter

    }

}



// 包装 component ，注入 dispatch 和 state 到其默认的 connect(select)(App) 中；

export default connect(select)(App);

state.visibilityFilter

visibilityFilter(state)