Redux学习笔记（一）

关于Redux学习笔记（一）

Redux简书

Redux是一种状态管理器，其前身是Flux。

三大原则

• 单一数据源（整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。这样可以保证整个数据的唯一性，为维护阅读起来带来便捷）
• State 是只读的（唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。）
• 使用纯函数来执行修改（为了描述 action 如何改变 state tree ，你需要编写 reducers。）

action

Redux通过action将数据传到 store 。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
action的结构只是一个普通的js对象。
例如：

const addTodo = {
  type: "ADD_TODO",
  text
}

我们一般要求action必须有一个key为type，type通常为常量。除了type这个key以外，剩下的对象结构按照项目需求或者自己习惯随意定义。
Action 创建函数 就是生成 action 的方法。“action” 和 “action 创建函数” 这两个概念很容易混在一起，使用时最好注意区分。
在 Redux 中的 action 创建函数只是简单的返回一个 action。
例如：

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

store 里能直接通过 store.dispatch() 调用 dispatch() 方法，但是多数情况下你会使用 react-redux 提供的 connect() 帮助器来调用。bindActionCreators() 可以自动把多个 action 创建函数 绑定到 dispatch() 方法上。
action的创建函数可以创建异步action。
异步action创建函数 必须返回一个以dispatch为参数的匿名函数。（不过需要中间件，一般来说用redux-thunk）
例如：

function getList() {
	return (dispatch) => {
		dispatch(requestStart);//开始请求  这个地方可以处理请求开始的加载控制数据
		return fetch('/api').then((res) => {
			dispatch(requestSuccess(res.data));//请求成功  这个地方处理请求成功将请求到的数据传递给store进行处理
      }).catch((err) => {
			dispatch(requestError(err));//请求失败 这个处理请求失败时将错误状态和错误信息传给store进行处理
     })
	}
}

一般一个请求分为三个action 请求开始之前 请求成功 请求失败 。

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。
而描述state如何更新的工作正是通过Reducer来实现。
reducer需要注意的地方：

1. 不能对state直接进行修改
2. 在 default 情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state。

reducer是一个纯函数。
例如：

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case TOGGLE_TODO:
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: !todo.completed
          })
        }
        return todo
      })
    default://这个地方注意一定要返回旧的的state
      return state
  }
}

注意每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同，分别对应它管理的那部分 state 数据。
reducer 可以分开写 然后通过combineReducers进行整合。
reducer用法比较简单，可以参考reducer我觉得这个地方讲的挺好也简单（我觉得没什么要讲的地方）。

Store

Store 就是把action和reducer联系到一起的对象。Store 有以下职责：

• 维持应用的 state
• 提供 getState() 方法获取 state
• 提供 dispatch(action) 方法更新 state
• 通过 subscribe(listener) 注册监听器
• 通过 subscribe(listener) 返回的函数注销监听器
  Redux 应用只有一个单一的 store处理逻辑的时候 可以拆分多个reducer，但是必须保持store唯一一个，多个reducer可以通过combineReducers进行整合。
  创建store通过redux的createStore来进行创造。
  createStore接受三个参数第一个参数整合的reducer 第二个参数可选是store的初始数据 第三个参数是可以传入一个函数对createStore进行加强。

import { createStore } from 'redux'
import rootReducer from './reducers'
let store = createStore(rootReducer)

stroe 和 reducer action三者关系我理解的是：
action来分发改变数据 然后通过reducer 告诉store 该怎么去改变state 然后store再将改变的state传递给通过connect链接的组件。这样实现数据全部存储在store中。数据流向 以单一数据流。
我理解的redux的单一数据流：应用操作（用户操作，服务端获取数据）–> action --> reducer(返回一个state）—> reducer --> store —> connect链接组件（组件根据变化的props做出相应的反应）。
在项目我使用了redux-actions 库来帮助我用redux简单一点 有兴趣的可以了解一下