redux初体验之官方小项目详解

redux把所有的状态（state）保存在一个object里。然后把整个app当成一个状态机，状态（state）改变，视图(view)也就发生改变。

上面这句话是对redux的设计核心思想的一个简要的概括。很多人光看到肯定觉得还不明白，那我用一个模型来解释

这是一个object它储存着一个状态集合

{ title:"welcome to study react "}

然后这是他对应的一个节点

<h1>welcome to study react </h1>

那么当store变化的时候，比如说变成这样

{ title;"welcome to study redux"}

对应节点就发生了变化。

<h1>welcome to study redux</h1>

redux的核心思想就是通过改变状态集合来影响页面。

下面我们来解释下官方的经典实例小demo。

根据需求我们来设计他的不同行为的状态集合。

我们可以添加，那么就必须有一个add todo的操作，暂定给他一个type：“ADD_TODO”(在redux中，type字段是必须要有的)

然后要有一个id来记录添加的元素 id:add_id++(add_id已经被定义而且初始值为0)

最后就是添加的内容text：text(text 是返回该对象的方法的传入参数)

这个状态集合{

type: 'ADD_TODO',
  id: nextTodoId++,
  text: text

}

然后每个列表的元素还能够被操作，也就是点击划横线,这也是一个状态集合,那么type:"TOGGLE_TODO"，然后还需要给一个当前操作的id：id（id是由返回该对象的方法的产传入参数）

这个状态集合{

type: 'TOGGLE_TODO',
  id:id

}

最后点击下一部分的footer的不同按钮还会有不同的筛选结果，于是应该有一个相应的筛选现实列表的状态集合

{

  type: 'SET_VISIBILITY_FILTER',
    filter(该返回函数传入的参数为筛选条件)

}

没错，上述要导出的状态集合，在redux中叫做action，简单来说action就描述了现在发生的事情，也是用户改变state的唯一途径。

那么，action写好了，store接收到了action,肯定要返回一个新的状态集，这样页面才能发生变化，那么reducer就是为了获取旧的state和action生成新的状态集

现在模拟一下，如果Add Todo发生了，会发生什么事情？没错，就是添加了一条元素。那么我们该这么设计reducer的方法。

//该函数是为了todos调用

const todo = (state, action) => {
  //state 是列表中元素前一个状态，action是action返回的状态集
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      }//添加的话，那就返回要添加的元素的状态集
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state
      }
      return {
        ...state,
        completed: !state.completed
      }//如果点击的元素是当前元素的话就扩展state的completed属性，否则返回原来的状态集
    default:
      return state
  }
}

//返回列表状态集状态集
const todos = (state = [], action) => {

//state表示之前的状态集
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)//如果是添加操作的话，就把新的状态集和原来的合并
      ]
    case 'TOGGLE_TODO':
      return state.map(t =>
        todo(t, action)
      )//如果是点击单个项的话，调用数组的map方法对每个元素进行todo操作
    default:
      return state
  }
}

export default todos

回顾一下redux的工作流程

Reducers处理完返回新的state倒store里来以后，会在react components里展现，而组件又分有两种，一种是components（展示组件）另一种是containers（容器组件）

那么两种有啥区别呢？

此时，Add Todo有这么个添加的逻辑，那么这里我们肯定要建立一个containers。

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


let AddTodo = ({ dispatch }) => {
  let input


  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))//把text的内容分发到action通知这么一个动作
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)//connect是react-redux里的一个方法，是将上面声明的(AddTodo components)转变成containers
export default AddTodo

最后我们就可以在App.js里进行引用了

import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'


const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)


export default App

至此，一个完整的redux的工作流程就展示完毕了，由于时间的问题，我会再下周详解显示功能的流程。

总结：示例项目redux的工作流程：

1:action去定义将要发生的动作addTodo () return { type: 'ADD_TODO',id: nextTodoId++,text}  .

2:发生动作后，上面的action return的obj会被reducers接收，todos函数会把原来的state列表中插入你要新加入的也就是action return的obj生成新的state数组列表。

3:定义AddTodo这个containers，在表单提交里去分发addTodo这个action。