redux基础

Action 就是一个普通 JavaScript 对象，用来描述发生了什么

它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
添加新 todo 任务的 action 是这样的

const ADD_TODO = 'ADD_TODO'
{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

上例中，type代表“添加一个todo”的动作，text代表“要添加的todo的内容”。（action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。除 type以外的数据接口由自己决定）

要完成一个todo的action如下

{
  type: "TOGGLE_TODO",//代表“完成一个todo”的动作
  index: 5//代表要完成的todo的id
}

最后设置过滤todo的方式

{
  type: "SET_VISIBILITY_FILTER",//代表要设置过滤方式
  filter: "SHOW_COMPLETED"//代表要设置的过滤方式
}

Action创建函数，就是一个工具函数，用来创建上面的Action对象

function addTodo(text) {
  return {
    type: "ADD_TODO",
    text
  }
}

reducer 只是一个接收 state 和 action，并返回新的 state 的函数

(previousState, action) => newState
之所以将这样的函数称之为reducer，是因为这种函数与被传入 Array.prototype.reduce(reducer, ?initialValue) 里的回调函数属于相同的类型。（reducer函数第一个参数是“累计器”，第二个参数是“当前值”）

//这里的action就是上面的action对象
const todos=(state=[],action)=>{//这里处理的数据源是todo list
    switch (action.type) {
        case 'ADD_TODO'://如果是添加todo，就把之前的todo list数据，和当前要添加的todo合并并返回
            return[
                ...state,
                {
                    id:action.id,
                    text:action.text,
                    completed:false
                }
            ]
         case 'TOGGLE_TODO'://如果是要完成某一项todo，就把传入的id对应的todo的状态改成已完成
             return state.map(todo=>
                (todo.id===action.id)
                ?{...todo,completed:!todo.completed}
                :todo
            )
        default:
            return state;
    }
}
//这里处理的是数据源，筛选的类别字符串（显示所有，待完成的，已完成的）
const visibilityFilter=(state='SHOW_ALL',action)=>{
    switch(action.type){
        case 'SET_VISIBILITY_FILTER'://如果是筛选，就返回设置的筛选类型
            return action.filter
        default:
            return state
    }
}

以上是处理todo的reducer，之所以这么拆分，是根据处理的数据源拆分的，详情写在代码注释里。合并可以用如下代码：

//传入state和action
function todoApp(state = {}, action) {
  return {
    visibilityFilter: visibilityFilter(state.visibilityFilter, action),
    todos: todos(state.todos, action)
  }

Redux 提供了 combineReducers() 工具类来做上面 todoApp 做的事情

import { combineReducers } from 'redux'

const todoApp = combineReducers({
  visibilityFilter,
  todos
})

export default todoApp

由reducer的内容便可知state对象的结构如下：

{
  todos:[],
  visibilityFilter:''
}

Store 就是把Action和Reducers联系到一起的对象

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)//用上面的reducers作为参数创建一个store

发起一个Action
store.dispatch(addTodo('Learn about actions'))

最后编辑于：2020.06.23 19:35:05