React.js——Redux同步操作

前言
    每每提到Redux都会想起Vuex，相比起Vuex，Redux确实抽象了一些。官方文档给的入门的DEMO中的todoList，其中很多的代码逻辑都得自己去梳理。

容器组件和展示组件

    Redux的React绑定库是基于容器组件和展示组件相分离的开发思想。

展示组件

    作用：描述如何展现骨架、样式
    直接使用Redux：否
    数据来源：props
    数据修改：从props调用回调函数
    调用方式：手动

容器组件

    作用：描述如何运行数据获取、状态更新
    直接使用Redux：是
    数据来源：监听Redux state 即使用store.subscribe()从Redux state树种读取部分数据 通过props来把这些数据提供给要渲染组件
    数据修改：向Redux派发actions
    调用方式：通常由React Redux生成

connect()方法

    通过connect()方法将state、action和展示组件结合一起

Redux使用开发要点

actions

    首先要定义触发的事件以及要传递的数据，最终由action创建函数返回对象

---

    基本语法：

	const addtodo = (text) => {
		return {
			type: 'ADD_TODO',
			text  //需要携带给reducer的数据
		}
	}

reducer

    reducer用于针对特定的action_type返回特定操作进行后的state

---

    基本语法：

		//需要注意的是初始状态的state的值也是定义在reducer函数中的
		const todos = (state = [], action) {
			switch(action.type) {
				case 'ADD_TODO':
					return [...state, action.text]
				defatul:
					break
			}
		}
		//如果存在多个reducer  可以使用combineReducers  需要注意的是combineReducers from 'redux'  即需要npm install --save redux
		const todoApp = combineReducers({
			todos,
			...
		})

PS：现在看起来是不是感觉action和reducer并没有通过实际的代码联系起来

index.js 创建 store

	import todoApp from './reducers'
	import {createStore} 'react-redux'

	const store = createStore(todoApp)

容器组件（一般放在containers目录下）

    容器组件的类别：

• 自己本身就是组件

	import React from 'react'
	import {connect} from 'react-redux'
	import {addTodo} from '../action'

	//{dispatch}相当于解构store
	let AddTodo = ({dispatch}) => {
    let input

    return (
        <div>
            <form
                onSubmit={e => {
                    e.preventDefault()
                    if (!input.value.trim()) {
                        return
                    }
           	         dispatch(addTodo(input.value))
                     input.value = ''
           	     }}
         	   >
         	       <input 
           	         ref={node => {
              	          input = node
               	     }} 
              	  />
              	  <button type="submit">
                   	 Add Todo
                	</button>
           		 </form>
        	</div>
    	)
	}

	//将AddTodo与store关联
	AddTodo = connect()(AddTodo)

	export default AddTodo

• 不是组件，需要通过connect和展示组件绑定

	import {connect} from 'react-redux'
	import {toggleTodo} from '../actions'
	import TodoList from '../components/TodoList'

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

	const mapStateToProps = state => {
    	return {
      	  todos: getVisibleTodos(state.todos, 	state.visibilityFilter)
   		 }
	}

	const mapDispatchToProps = dispatch => {
   	 	return {
       		 onTodoClick: id => {
             dispatch(toggleTodo(id))
       	 }
    	}
	}

	const VisibleTodoList = connect(
 	  mapStateToProps,
  	  mapDispatchToProps
	)(TodoList)

	export default VisibleTodoList

	//很简明的mapStateToProps、mapDispatchToProps都返回了对象，通过connect函数调用后，TodoLis组件可以通过props访问这些对象属性或函数